Google Maps Marker onclick 并在特定缩放级别上拖动答案

【问题标题】：Google Maps Marker onclick and dragging on specific zoom levelGoogle Maps Marker onclick 并在特定缩放级别上拖动
【发布时间】：2012-12-11 22:26:13
【问题描述】：

我有两个问题。首先，我想用按钮在我的谷歌地图中添加标记，但我不知道我的错在哪里。其次，我的地图只能在缩放级别 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>

【问题讨论】：

标签： javascript google-maps-api-3 overlay draggable google-maps-markers

【解决方案1】：

您可以指定“可拖动”属性：

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
  });
})

【讨论】：

【解决方案2】：

我在您的代码中添加了一些代码。请检查差异。

<!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!"
    });


    google.maps.event.addListener(map, "zoom_changed", function() {
      marker.setDraggable(map.getZoom() == 16);
    })

    //var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds);
    //groundoverlay.setMap(map);
    //groundoverlay.setOpacity(1);

    var wcBtn = document.getElementById("btn_WCs");
    google.maps.event.addDomListener(wcBtn, "click", function() {
      setMarkers(map,wcs);
    });

    var gastroBtn = document.getElementById("btn_Gastro");
    google.maps.event.addDomListener(gastroBtn, "click", function() {
      setMarkers(map,gastro);
    });
  }

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);
    }


</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:480px; height:560px"></div>
  <form name="Test" action="">
  <input type="button" value="WCs" id="btn_WCs">
  <input type="button" value="Gastro" id="btn_Gastro" >
  </form>
</body>
</html>

【讨论】：

第一部分有效。谢谢！但在第二部分，标记不应该是可拖动的，地图应该只能在特定的缩放级别下拖动。