拖动和更新位置 - 如何做到这一点？

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()); 
} 

现在标记是可拖动的，我可以更新窗体中的正确字段。

欢迎任何其他方法。