可拖动的谷歌地图标记

我一直在使用谷歌地图，现在有要求制作一个可拖动的标记，我可以放在地图上。可拖动的谷歌地图标记

这是一个复杂性的巨大差异，只是由地理位置坐标放置标记？使用户可以设置可拖动标记的最佳方式是什么？

谢谢亚历

来源

2011-03-12 Genadinik

你不提您所使用的API的版本，所以我会asume V3 ......还有就是你可以在构造函数中使用选项参数设置任何可拖动属性'draggable：true'或创建后调用setDraggable（true）函数。

检查http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker了解更多信息。

编辑：对于2版本有enableDragging（）和disableDragging（）函数...

至于添加标记，或许订阅地图上的鼠标点击事件，然后在里面添加标记。坐标作为事件参数的一部分传递到事件处理函数中。

来源

2011-03-12 01:23:22

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    <script type="text/javascript"> 
 
     var geocoder = new google.maps.Geocoder(); 
 

 
     function geocodePosition(pos) { 
 
      geocoder.geocode({ 
 
       latLng: pos 
 
      }, function (responses) { 
 
       if (responses && responses.length > 0) { 
 
        updateMarkerAddress(responses[0].formatted_address); 
 
       } else { 
 
        updateMarkerAddress('Cannot determine address at this location.'); 
 
       } 
 
      }); 
 
     } 
 

 
     function updateMarkerStatus(str) { 
 
      document.getElementById('markerStatus').innerHTML = str; 
 
     } 
 

 
     function updateMarkerPosition(latLng) { 
 
      document.getElementById('info').innerHTML = [ 
 
       latLng.lat(), 
 
       latLng.lng() 
 
      ].join(', '); 
 
     } 
 

 
     function updateMarkerAddress(str) { 
 
      document.getElementById('address').innerHTML = str; 
 
     } 
 

 
     function initialize() { 
 
      var latLng = new google.maps.LatLng(9.010951935679284, 38.760017580032354); 
 
      var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
 
       zoom: 15, 
 
       center: latLng, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      }); 
 
      var marker = new google.maps.Marker({ 
 
       position: latLng, 
 
       title: 'Point A', 
 
       map: map, 
 
       draggable: true 
 
      }); 
 

 
      // Update current position info. 
 
      updateMarkerPosition(latLng); 
 
      geocodePosition(latLng); 
 

 
      // Add dragging event listeners. 
 
      google.maps.event.addListener(marker, 'dragstart', function() { 
 
       updateMarkerAddress('Dragging...'); 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'drag', function() { 
 
       updateMarkerStatus('Dragging...'); 
 
       updateMarkerPosition(marker.getPosition()); 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'dragend', function() { 
 
       updateMarkerStatus('Drag ended'); 
 
       geocodePosition(marker.getPosition()); 
 
      }); 
 
     } 
 

 
     // Onload handler to fire off the app. 
 
     google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script>

<style type="text/css"> 
 
     #mapCanvas { 
 
      width: 500px; 
 
      height: 400px; 
 
      float: left; 
 
     } 
 

 
     #infoPanel { 
 
      float: left; 
 
      margin-left: 10px; 
 
     } 
 

 
      #infoPanel div { 
 
       margin-bottom: 5px; 
 
      } 
 
    </style>

<html> 
 
<head> 
 
    <title></title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    </head> 
 
<body> 
 
    <div id="mapCanvas"></div> 
 
    <div id="infoPanel"> 
 
     <b>Marker status:</b> 
 
     <div id="markerStatus"><i>Click and drag the marker.</i></div> 
 
     <b>Current position:</b> 
 
     <div id="info"></div> 
 
     <b>Closest matching address:</b> 
 
     <div id="address"></div> 
 
    </div> 
 
</body> 
 
</html>

来源

2015-10-01 13:29:59 Ghebrehiywet

能否请你解释你的答案？ – Prudhvi 2015-10-01 13:48:06

可拖动的谷歌地图标记

回答

相关问题