jQuery Google Maps api V3 更新标记

Google Maps api V3 update marker

提问by Richard

I've got a map that loads. I want to add a marker that gets it's lat and long from text boxes, and I can't fathom it.

我有一张可以加载的地图。我想添加一个标记，从文本框中获取它的纬度和经度，但我无法理解。

Nothing happens when I click on the updatemap button.

当我点击 updatemap 按钮时什么也没有发生。

Here's my code so far:

到目前为止，这是我的代码：

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

});

回答by no.good.at.coding

Update

更新

Also, your global mapreference is never set to the actual map instance since you shadow it with a local varsame name.

此外，您的全局map引用永远不会设置为实际的地图实例，因为您使用本地var相同的名称对其进行了阴影处理。

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

This should be just

这应该只是

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

---

---

You're using latand lngfor the marker position before they're initialized (unless they're globally set somewhere):

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

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

If you want to update the position of the same marker and not create a new one, you should simply be doing this:

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

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

回答by Yuri Stuken

First, in initializefunction you are creating new local mapvariable, because you use varkeyword. This variable is not visible outside initialize, so you need to remove varto use global variable.

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

Second, you are using latand lngvariables before they are defined.

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

Third, you are accessing setPositionmethod of markervariable when markermay not be defined.

第三，要访问setPosition的方法marker时变量marker可以不定义。

After fixing all of these your code may look like this:

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

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