2015-08-28 71 views
1

我現在正在按文本框的搜索位置顯示Google地圖。它工作正常。現在我想要的是從地圖拖動位置圖標到不同的位置,並藉助按鈕更新位置。如何使用jQuery在Google地圖中拖動和更新位置圖標

我正在嘗試爲此找到一個函數或API調用,但我仍然在努力處理這段代碼。

這是我目前的工作代碼:

function loadMaps() { 
    var address = $("#txtAddress").val() 

    var geo = new google.maps.Geocoder; 
    geo.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
       var myLatLngh = results[0].geometry.location; 

        var myOptions = { 
         center: myLatLngh, 
         zoom: 12, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         mapTypeControlOptions: { 
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
          position: google.maps.ControlPosition.TOP_CENTER 
         } 

        }; 

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

        var marker = new google.maps.Marker({ 
         position: myLatLngh, 
         title: address 
        }); 

        marker.setMap(map); 
        var infowindow = new google.maps.InfoWindow({ content: "<b>Location Address</b><br/> " + address }); 
        infowindow.open(map, marker); 

} 
     else { 

     alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 

     } 

回答

0

您需要先在您的標記使draggable選項:

var marker = new google.maps.Marker({ 
    position: myLatLngh, 
    title: address, 
    draggable: true 
}); 

然後,您可以在回調中使用marker.getPosition().lat()marker.getPosition().lng()。像這樣使用dragend事件:

marker.addListener('dragend', function() { 
    // Do something with the positions here 
    // once the user has finished dragging the marker 
    console.log(marker.getPosition().lat()); 
    console.log(marker.getPosition().lng()); 
}); 

這裏是一個basic example

相關問題