Question

官方谷歌示例：

简单标记（无标签） https://developers.google.com/maps/documentation/javascript/examples/marker-simple
标记标记 https://developers.google.com/maps/documentation/javascript/examples/marker-labels

如果您点击标记并拖动第一张地图 - 地图可拖动，在第二张地图上 - 我无法通过标记拖动地图。那么如何将标记与标记 + 这个标记可拖动的地图结合起来？

Answer 1

也许这不是最好的解决方案，但通过在地图上添加floatPane叠加层，您可以拖动地图点击标记。但不幸的是，这种方式你会错过一些功能。例如，您无法使用标记的点击事件，因为floatPane叠加层是地图上的最顶层： https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes

我已经为你结合

制作了一个样本

标记标签： https://developers.google.com/maps/documentation/javascript/examples/marker-labels

和自定义叠加层： https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

实施例。

<html>
<!DOCTYPE html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Labels + Custom Overlay</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      var labelIndex = 0;
      var map;
      var overlay1, overlay2;
      floatOverlay.prototype = new google.maps.OverlayView();
      function initialize() {
        var centerPos = {lat: 37.323907, lng: -98.109291};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: centerPos
        });
        google.maps.event.addListener(map, 'click', function(event) {
          addMarker(event.latLng, map);
        });
        addMarker(centerPos, map);
        var bounds1 = new google.maps.LatLngBounds(new google.maps.LatLng(-90, -180), new google.maps.LatLng(90,0));
        var bounds2 = new google.maps.LatLngBounds(new google.maps.LatLng(-90, 0), new google.maps.LatLng(90,180));
        overlay1 = new floatOverlay(bounds1, map);      
        overlay2 = new floatOverlay(bounds2, map);      
      }

      function addMarker(location, map) {
        var marker = new google.maps.Marker({
          position: location,
          label: labels[labelIndex++ % labels.length],
          map: map
        });
      }
      function floatOverlay(bounds, map) {
        this.bounds_ = bounds;
        this.map_ = map;
        this.div_ = null;
        this.setMap(map);
      }

      floatOverlay.prototype.onAdd = function() {
        var div = document.createElement('div');
        div.style.borderStyle = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';
        this.div_ = div;
        var panes = this.getPanes();
        panes.floatPane.appendChild(div);
      };

      floatOverlay.prototype.draw = function() {
        var overlayProjection = this.getProjection();
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
      };
      floatOverlay.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
      };      

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

我希望这会有所帮助，直到你得到更好的解决方案。

GoogleMaps：如何通过带标签的标记使地图可拖动？

1 个答案: