更新标记位置Google Maps V3 [英] Update Marker Position Google Maps V3
问题描述
目前，我的脚本查找用户位置，并在将LatLon复制到某些表单域时添加了一个PIN。
除了放大用户的位置，我希望他们有能力添加一个自定义地址输入到文本字段，geocoded，然后更新当前销在地图上。
这所有的作品，虽然它增加了一个额外的引脚，而不是更新当前的引脚。
我不确定如何将地址地理编码函数的值传递回原来的引脚/或者我删除原来的引脚并添加一个新的引脚。我相信我可以重用一些函数以及...我不认为我的代码是非常有效的：/ / $ / $>
任何方式，我希望有一个古鲁可以在那里帮助我
欢呼
Nick
var geocoder ;
var map;
var pos;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var newyork = new google.maps.LatLng（40.69847032728747，-73.9514422416687）;
var address = document.getElementById（address）。value;
var initialLocation;
var myOptions = {
zoom：12，
center：initialLocation，
mapTypeId：google.maps.MapTypeId.TERRAIN
}
//尝试HTML5地理定位
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
var pos = new google.maps .LatLng（position.coords.latitude，
position.coords.longitude）;
var marker = new google.maps.Marker（{
map：map ，
position：pos，
title：'使用HTML5找到的位置'，
可拖动：true
}）;
var lat = position.coords.latitude
var lng = position.coords.longitude
document.getElementById（'geo_latitude'）。value = lat;
document.getElementById（'geo_longitude '）.value = lng;
google.maps.event.addListener（marker，dragend，function（event）{
var lat = event.latLng.lat（）
var lng = event.latLng.lng（）
var infowindow = new google.maps.InfoWindow（{
content ：'< b><？php _e（'Latitude：'）;？>< / b>'+ lat +'< br>< b><？php _e（'Longitude：'） ;？>< / b>'+ lng
}）;
infowindow.open（map，marker）;
google.maps.event.addListener（marker，dragstart，function（）{
infowindow.close（）;
}）;
document.getElementById（'geo_latitude'）。value = lat;
document.getElementById（'geo_longitude'）。value = lng;
}）;
map.setCenter（pos）;
}，function（）{
handleNoGeolocation（true）;
}）;
} else if（google.gears）{
browserSupportFlag = true;
var geo = google.gears.factory.create（'beta.geolocation'）;
geo.getCurrentPosition（function（position）{
initialLocation = new google.maps.LatLng（position.latitude，position.longitude）;
map.setCenter（initialLocation）;
}，function（）{
handleNoGeoLocation（browserSupportFlag）;
}）;
//浏览器不支持地理位置
}其他{
browserSupportFlag = false;
handleNoGeolocation（browserSupportFlag）;
$ b函数handleNoGeolocation（errorFlag）{
if（errorFlag == true）{
alert（Geolocation service failed。）;
initialLocation = newyork;
} else {
alert（您的浏览器不支持地理定位，我们已将您置于纽约。）;
initialLocation = newyork;
}
map.setCenter（initialLocation）;
}
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
}
// ----------------------------------- --------------------结束初始化
函数findAddress（地址）{
var address = document.getElementById （解决）值。
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map .setCenter（results [0] .geometry.location）;
var pos = results [0] .geometry.location;
} else {
alert（Geocode was not成功的原因如下：+ status;
}
}）;
解决方案到'移动'你现有的标记，你会想确保它的全局，然后你可以更新它在findAddress函数中的位置，如：
marker.setPosition（结果[0] .geometry.location）;
I am quite a novice with javascript stuff and am currently faking it till i make it lol and now ive come across a small hill that i'm struggling to get over :S.
Currently my script finds the users location and adds a pin to the map while copying LatLon to some form fields.
In addition to just zooming in on the users location i would like them to have the ability to add a custom address which is entered into a text field, geocoded and then updates the current pin on the map.
This all works, although it adds an additional pin to the map rather than updating the current pin.
I am unsure how to pass the value from the address geocoding function back into the original pin / or do i delete the original pin and add a new pin. I'm sure i can reuse some functions as well... i don't think my code is terribly efficient :/
Any way i hope a guru out there can help me out
Cheers
Nick
var geocoder;
var map;
var pos;
function initialize() {
geocoder = new google.maps.Geocoder();
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var address = document.getElementById("address").value;
var initialLocation;
var myOptions = {
zoom: 12,
center: initialLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
map: map,
position: pos,
title: 'Location found using HTML5.',
draggable: true
});
var lat = position.coords.latitude
var lng = position.coords.longitude
document.getElementById('geo_latitude').value=lat;
document.getElementById('geo_longitude').value=lng;
google.maps.event.addListener(marker, "dragend", function(event) {
var lat = event.latLng.lat()
var lng = event.latLng.lng()
var infowindow = new google.maps.InfoWindow({
content: '<b><?php _e('Latitude:');?></b>' + lat + '<br><b><?php _e('Longitude:');?></b>' + lng
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, "dragstart", function() {
infowindow.close();
});
document.getElementById('geo_latitude').value=lat;
document.getElementById('geo_longitude').value=lng;
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in New York.");
initialLocation = newyork;
}
map.setCenter(initialLocation);
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//-------------------------------------------------------End initialize
function findAddress(address) {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var pos = results[0].geometry.location;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
解决方案 To 'move' your existing marker, you'll wanna make sure its global and then you can just update its position within the findAddress function with something like:
marker.setPosition(results[0].geometry.location);
这篇关于更新标记位置Google Maps V3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
