Google Maps api V3 更新标记

Posted 2023-02-23

【中文标题】Google Maps api V3 更新标记

【英文标题】：Google Maps api V3 update marker

【发布时间】：2011-09-05 15:17:46

【问题描述】：

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

当我点击更新地图按钮时没有任何反应。

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

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

);

【参考方案1】：

首先，在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);
);

【参考方案2】：

更新

此外，您的全局 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);
);