我有一张加载的地图。 我想添加一个标记,从文本框中获取它的lat和long,我无法理解它。
单击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);
});
答案 0 :(得分:33)
<强>更新强>
此外,您的全局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);
});
答案 1 :(得分:4)
首先,在initialize
函数中,您正在创建新的本地map
变量,因为您使用了var
关键字。此变量在initialize
之外不可见,因此您需要删除var
才能使用全局变量。
其次,您在定义lat
和lng
变量之前使用它们。
第三,当setPosition
未定义时,您正在访问marker
变量的marker
方法。
修复所有这些后,您的代码可能如下所示:
$(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);
});