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

问题描述：

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

如果您单击第一个地图上的标记和拖动 - 地图第二张地图上的可拖动， - 我无法通过标记拖动地图。那么如何结合标记与标签 + 地图可拖动这个标记？

答

也许这不是最好的解决方案，但是通过在地图上添加一个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：如何通过带有标签的标记拖动地图？

相关推荐