谷歌地图api V3更新标记

Question

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

当我点击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); 

}); 

Answer 1

更新

而且，由于你与当地var同名遮盖了全局map引用从未设置为实际地图实例。

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

Answer 2

首先，在initialize功能要创建新的本地map变量，因为你用var关键字。此变量在initialize之外不可见，所以您需要删除var以使用全局变量。

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

三，您正在访问方法变量时可能未定义。

固定所有这些后，你的代码可能是这样的：

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