拖動和更新位置 - 如何做到這一點？

Question

我正在嘗試關注您的wiki，stackExchange等的信息來完成這項工作。 這個想法是爲用戶創建一個新的位置。該應用程序顯示地圖，在0,0位置放置一個標記，然後用戶將此標記拖動到任意位置，並使用新的緯度和日誌更新表格。看起來微不足道，維基上有文檔，但我無法使其工作。

我使用的是寶石版本2.1.2和Rails 4.1。我成功地顯示了地圖，標記等，但我無法使回調和其他功能正常工作。我使用這個文檔嘗試：https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Javascript-goodies#drop-a-marker-and-update-fields-attribute-in-a-form

按照我的看法代碼：

handler = Gmaps.build('Google'); 
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers(
    [ 
     { 
     "lat": 0, 
     "lng": 0, 
     draggable: true 
     } 
    ] 
); 

    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 

    // Callback function 
    var markersArray = []; 
    var marker = handler.getMap().markers[0]; 
    if (marker) { 
    // Move existing marker when editing a previously stored location 
    google.maps.event.addListener(marker.serviceObject, 'dragend', function() { 
     updateFormLocation(this.getPosition()); 
    }); 
    } 

    // On click, clear markers, place a new one, update coordinates in the form 
    google.maps.event.addListener(handler.getMap().serviceObject, 'click', function(event) { 
    clearOverlays(); 
    placeMarker(event.latLng); 
    updateFormLocation(event.latLng); 
    }); 
}); 

// Other functions 
// Update form attributes with given coordinates 
function updateFormLocation(latLng) { 
    $('#centre_latitude').val(latLng.lat()); 
    $('#centre_longitude').val(latLng.lng()); 
    $('#centre_gmaps_zoom').val(handler.getMap().serviceObject.getZoom()); 
} 
// Add a marker with an open infowindow 
function placeMarker(latLng) { 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: handler.getMap().serviceObject, 
    draggable: true 
    }); 
    markersArray.push(marker); 
    // Set and open infowindow 
    var infowindow = new google.maps.InfoWindow({ 
    content: '<div class="popup"><h2>Awesome!</h2><p>Drag me and adjust the zoom level.</p>' 
    }); 
    infowindow.open(handler.getMap().serviceObject, marker); 
    // Listen to drag & drop 
    google.maps.event.addListener(marker, 'dragend', function() { 
    updateFormLocation(this.getPosition()); 
    }); 
} 
// Removes the overlays from the map, including the ones loaded with the map itself 
function clearOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray.length = 0; 

    for (var i = 0; i < handler.getMap().markers.length; i++) { 
    handler.getMap().clearMarker(handler.getMap().markers[i]); 
    } 
} 

然後我得到一個錯誤：

TypeError: undefined is not an object (evaluating 'handler.getMap().markers[0]') 

此外，標記是不可拖動...

有沒有任何完整的例子，如何做到這一點？

謝謝大家！

Answer 1

你的代碼有很多錯誤。很難一一解釋。

Here is a solution suggestion.

基本上當你使用

handler.getMap() 

它已經是谷歌地圖對象，所以不要做：

handler.getMap().serviceObject 

Answer 2

我想我找到了解決方案。按照代碼

handler = Gmaps.build('Google'); 
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers(
    [ 
     { 
     "lat": 0, 
     "lng": 0, 
     } 
    ] 
    ,{ draggable: true} 
); 

    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 

    // Move existing marker 
    google.maps.event.addListener(markers[0].serviceObject, 'dragend', function() { 
    updateFormLocation(this.getPosition()); 
    }); 
}); 

// Update form attributes with given coordinates 
function updateFormLocation(latLng) { 
    $('#latitude').val(latLng.lat()); 
    $('#longitude').val(latLng.lng()); 
} 

現在標記是可拖動的，我可以更新窗體中的正確字段。

歡迎任何其他方法。