我有两个问题。首先，我想用按钮在我的谷歌地图中放置标记，但我不知道我的错在哪里。其次，我的 map 应该只能在缩放级别 16 上拖动。我希望有人能帮助我解决我的问题。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.502648,13.529278);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.502648, 13.529278),
minZoom: 15,
maxZoom: 16
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.50, 13.525),
new google.maps.LatLng(52.506, 13.534)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Listen for the dragend event
google.maps.event.addListener(map, 'bounds_changed', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.4952, 13.5189),
new google.maps.LatLng(52.51, 13.53957)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(52.503971,13.52073),
map:map,
title:"Hello World!"
});
marker.setMap(map);
var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds);
groundoverlay.setMap(map);
groundoverlay.setOpacity(1);
}
var wcs = [
['Klo1', 52.504971, 13.52063, 1],
['Klo2', 52.504071, 13.53023, 2],
];
var gastro = [
['Cafeteria', 52.504541,13.529014, 1],
['Imbiss', 52.500121,13.532913, 2],
];
function setMarkers(map,locations){
for (var i=0; i < locations.length; i++) {
var loc = locations[i];
var locLatLng = new google.maps.LatLng(loc[1], loc[2]);
var locmarker = new google.maps.Marker({
position:locLatLng,
map:map,
title: loc[0],
zIndex: loc[3]
});
};
locmarker.setMap(map);
}
/*google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.zoom!=15){map.setOptions({draggable:true});}
else map.setOptions({draggable:false});
});*/
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:480px; height:560px"></div>
<form name="Test" action="">
<input type="button" value="WCs" onclick="setMarkers(map,wcs)">
<input type="button" value="Gastro" onclick="setMarkers(map,gastro)">
</form>
</body>
</html>
最佳答案
您可以指定“可拖动”属性:
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.502648, 13.529278),
minZoom: 15,
maxZoom: 16,
draggable : false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
还有这个:
google.maps.event.addListener(map, "zoom_changed", function() {
map.setOptions({
draggable : map.getZoom() == 16
});
})
关于javascript - 谷歌地图标记点击并拖动特定缩放级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13829543/