繪圖經理標記監聽器Position_Changed

Question

我的代碼有問題。我想在使用繪圖管理器繪製標記之後製作可拖動的標記，並且希望使可拖動標記位置值改變輸入字段的值[lat & lon]。這是我的代碼：

function initMap() { 
     // set up the map 
     mapModal = new google.maps.Map(document.getElementById('mapModal'), { 
      center : {lat: lat, lng: lng}, 
      zoom : 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: false, 
      zoomControl : true, 
     }); 

     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.MARKER, 
      drawingControl: true, 
      drawingControlOptions: { 
       position: google.maps.ControlPosition.TOP_CENTER, 
       drawingModes: ['marker'] 
      }, 
      markerOptions: { 
       editable: true, 
       draggable: true, 
      }, 
     }); 
     drawingManager.setMap(mapModal); 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(marker) { 
      google.maps.event.addListener(marker, 'position_changed', function() { 
       var lat = marker.getPosition().lat(); 
       var lon = marker.getPosition().lng(); 

       $('#lat').val(lat); 
       $('#lon').val(lon); 
      }); 
     }); 
    } 

我從來沒有得到的輸入域[lat & lon]的值發生了變化。任何人都可以幫我解決我的問題嗎？謝謝！

Answer 1

我認爲主要問題是marker.getPosition（）。lat（）;在事件處理程序中，您應該使用「this」而不是「marker」。不知道它是否解決了一切。

下面是一個簡單的「拖放標記，寫在輸入元素座標」

<input id="lat" /> 
<input id="lng" /> 
<div id="map"></div> 
<style> 
    #map { 
     height: 400px; 
    } 
</style> 
<script> 
    function initMap() { 
     var myLatlng = { // Brussels 
      lat: 50.85, 
      lng: 4.35 
     }; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: myLatlng 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      draggable: true, 
      title: 'Drag me' 
     }); 

     google.maps.event.addListener(marker, 'position_changed', function() { 
      // inside an event handler you should use "this". 
      // "this" represents whatever got affected, in this case the marker 
      document.getElementById('lat').value = this.getPosition().lat(); 
      document.getElementById('lng').value = this.getPosition().lng(); 
     }); 

    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>