Google Maps api V3更新标记

如何解决Google Maps api V3更新标记

| 我有一张正在加载的地图。 我想添加一个从文本框中获取经度和纬度的标记，但我无法理解它。 当我单击updatemap按钮时，没有任何反应。 到目前为止，这是我的代码：

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

});

    

解决方法

        更新资料 此外，全局

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

    ,        首先，在

initialize

函数中，因为使用

var

关键字，所以正在创建新的局部

map

变量。该变量在

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