Маркер обновления api V3 для Google Maps
У меня есть карта, которая загружается.
Я хочу добавить маркер, который получает его лат и длинный от текстовых полей, и я не могу понять его.
Ничего не происходит, когда я нажимаю кнопку 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);
});
Ответы
Ответ 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);
});
Ответ 2
Во-первых, в функции 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);
});