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

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

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