可拖動的谷歌地圖標記

我一直在使用谷歌地圖，現在有要求製作一個可拖動的標記，我可以放在地圖上。可拖動的谷歌地圖標記

這是一個複雜性的巨大差異，只是由地理位置座標放置標記？使用戶可以設置可拖動標記的最佳方式是什麼？

謝謝亞歷

來源

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

可拖動的谷歌地圖標記

回答

相關問題