2つの質問があります。まず、ボタン付きのマーカーをGoogleマップに配置したいのですが、どこに問題があるのかわかりません。そして第二に、私の地図はズームレベル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>