使用Google Maps API进行地理编码 - 更新现有标记,而不是添加其他标记 [英] Geocoding with Google Maps API - updating existing marker rather than adding another
问题描述
让我们以这个例子为例:
$ b 在地理编码时,如何将现有标记移动到新的地理编码结果的结果中。$ b
- 当地图加载时,会出现一个标记
- 当某人进行地理编码时,标记会移至结果
- 标记是可拖动的,所以用户可以进一步移动标记(如果他们想要的话)。
- 也许他们想重新对某个位置进行地理编码,所以新的结果应自动移动现有标记。
在本示例中:
< href =https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple =nofollow> https://google-developers.appspot.com/maps/documentation/ javascript / examples / geocoding-simple
...为每个新地理编码绘制一个新标记。
是否有意义?
谢谢!!!
-m
- 如果它存在,使用.setPosition将其移动到新的位置,然后在
- 之前检查它是否存在。
- 如果它不存在,请在所需位置创建一个标记。 举例说明接近你想要的东西
- When the map loads, a marker appears
- When someone geocodes, the marker moves to the result
- The marker is draggable, so the user can further move the marker (if they want to)
- Perhaps they want to re-geocode a location, so the new result should automatically move the existing marker.
- Make the marker global.
- Check if it exists before creating a new one.
- if it exists use .setPosition to move it to the new location
- if it doesn't exist, create a marker at the desired location.
工作代码片段:
var map = null; var marker = null; var geocoder = new google.maps.Geocoder(); var infowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-34)}); function initialize(){map = new google.maps.Map(document.getElementById('map-canvas' ),{center:new google.maps.LatLng(42,-85),zoom:4});} function codeAddress(){var address = document.getElementBy (出处同上)(地址)值; geocoder.geocode({'address':address},function(results,status){if(status == google.maps.GeocoderStatus.OK){map.setCenter(results [0] .geometry.location); content = results [marker.setPosition(results [0] .geometry.location);} else {marker = new google.maps.Marker ({map:map,icon:{url:'http://maps.google.com/mapfiles/arrow.png',anchor:new google.maps.Point(10,34)},position:results [0] .geometry.location}); google.maps.event.addListener(marker,'click',function(evt){infowindow.open(map);});} infowindow.setPosition(results [0] .geometry.location) ; infowindow.open(map);} else {alert('您的搜索不成功,原因如下:'+ status);}});} google.maps.event.addDomListener(window, load',initialize);
html,body,#map -canvas {height:500px;宽度:500px; margin:0px; < script src =https:// //maps.googleapis.com/maps/api/js?v=3\"></script><input id =addressvalue =New York,NY/>< input id = geocodetype =buttonvalue =Findonclick =codeAddress()/>< div id =map-canvas>< / div>
How, when geocoding, can you simply move an existing marker to the result of a new geocode result.
Let's take this example:
In this sample:
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
...a new marker is drawn for every new geocode.
Does that make sense?
Thanks!!!
-m
Example that does something close to what you want
working code snippet:
var map = null;
var marker = null;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-34)});
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(42, -85),
zoom: 4
});
}
function codeAddress() {
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);
content = results[0].formatted_address;
infowindow.setContent(content);
if (marker && marker.setPosition) {
marker.setPosition(results[0].geometry.location);
} else {
marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.google.com/mapfiles/arrow.png',
anchor: new google.maps.Point(10, 34)
},
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.open(map);
});
}
infowindow.setPosition(results[0].geometry.location);
infowindow.open(map);
} else {
alert('Your search was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<input id="address" value="New York, NY" />
<input id="geocode" type="button" value="Find" onclick="codeAddress()" />
<div id="map-canvas"></div>
这篇关于使用Google Maps API进行地理编码 - 更新现有标记,而不是添加其他标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!