谷歌地图API V3更新标记

Question

我有一个已经加载好的地图。我想要在地图上添加一个标记，它的纬度和经度需要从文本框中获取，但我无法理解该如何实现。

当我点击“更新地图”按钮时，什么都没有发生。

这是我的代码：

$(document).ready(function () {
    alert("Dom, dom dom dom dom");


var map;
var marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(40.65, -74);
    var myOptions = {
        zoom: 2,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

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



$("#updateMap").click(function(){


    var newLatLng = new google.maps.LatLng(lat, lng);
    marker.setPosition(newLatLng);

    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);


    marker = new google.maps.Marker({
        position: newLatLng,
        map: map,
        draggable: true
    });


});


});



// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

});

- Richard

Answer 1

更新

此外，你的全局map引用从未设置为实际的地图实例，因为你使用同名的局部var隐藏了它。

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

这应该只是

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

在标记位置之前，您正在使用lat和lng（除非它们在全局某处设置）：

var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);

如果您想更新同一标记的位置而不创建一个新标记，那么您应该简单地执行以下操作：

$("#updateMap").click(function(){
    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);
    marker.setPosition(newLatLng);
});

- no.good.at.coding

Answer 2

首先，在initialize函数中，你创建了一个新的局部变量map，因为你使用了var关键字。这个变量在initialize外部不可见，所以你需要删除var以使用全局变量。

其次，你在定义lat和lng变量之前使用了它们。

第三，当marker未被定义时，你正在访问marker变量的setPosition方法。

修复所有这些问题后，你的代码可能如下所示：

$(document).ready(function () {
    alert("Dom, dom dom dom dom");

    var map;
    var marker;

    function initialize() {
        var myLatlng = new google.maps.LatLng(40.65, -74);
        var myOptions = {
            zoom: 2,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }

        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    }

    $("#updateMap").click(function(){

    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);

    if (marker != undefined)
        marker.setPosition(newLatLng);
    else
        marker = new google.maps.Marker({
            position: newLatLng,
            map: map,
            draggable: true
        });
    });
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
});

- Yuri Stuken