GoogleMaps：如何通過帶有標籤的標記拖動地圖？

-1

簡單的標記（無標籤） https://developers.google.com/maps/documentation/javascript/examples/marker-simple
標記與標籤 https://developers.google.com/maps/documentation/javascript/examples/marker-labels

如果您單擊第一個地圖上的標記和拖動 - 地圖第二張地圖上的可拖動， - 我無法通過標記拖動地圖。那麼如何結合標記與標籤 + 地圖可拖動這個標記？

2016-12-16 Andrew Unknown

也許這不是最好的解決方案，但是通過在地圖上添加一個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>

我希望這會有所幫助，直到您獲得更好的解決方案。

來源

2016-12-16 07:44:13 MKiss

GoogleMaps：如何通過帶有標籤的標記拖動地圖？

回答

相關問題