在Google Maps API上重新加载标记 [英] Reload Markers on Google's Maps API
本文介绍了在Google Maps API上重新加载标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是我的代码（来自Google API页面的大部分代码）。
< script>
var beaches = [
['Bondi Beach'，-12.890542,120.274856,4]，
['Coogee Beach'，-12.923036,520.259052,5]，
[ Cronulla Beach'，-12.028249,1221.157507,3]，
['Manly Beach'，-12.80010128657071,1121.28747820854187,2]，
['Maroubra Beach'，-33.950198,121.259302,1]
];
函数setMarkers（地图，位置）{
for（var i = 0; i< locations.length; i ++）{
var beach = locations [i];
var myLatLng = new google.maps.LatLng（beach [1]，beach [2]）;
var marker = new google.maps.Marker（{
position：myLatLng，
map：map，
title：beach [0]，
zIndex：beach [ 3]
}）;
函数初始化（）{
var mapOptions = {
zoom：3，
center：new google.maps。 LatLng（38.77417，-9.13417），
mapTypeId：google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map（document.getElementById（'map-canvas'） ，
mapOptions）;
setMarkers（地图，海滩）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
setInterval（function（）{setMarkers（map，beaches）;}，5000）;
< / script>
我只想重新加载标记。我尝试使用初始化函数重新载入地图，但没有奏效。然后我尝试使用setMarkers函数重新加载，并且仍然没有运气...
感谢您的帮助。
解决方案
几件你应该做的事情/我已经改变了你的原始代码：
- 使用有效（例如，1121.28747820854187不是有效的lng）
- 为您的地图创建一个全局变量（更容易在您的脚本中引用）
- 创建一个数组来保存您的标记
- 我添加了一个标记动画
animation：google.maps.Animation.DROP，添加到您的标记中，以便您可以看到它们何时重新加载，以及用重新加载标记按钮调用重新加载函数。
基本上你想要做的是：
$ b
- 在
setMarkers code> function - 将每个标记推送到
标记 - 重新加载你r标记，循环访问标记数组，并在每个标记上调用
setMap（null）以将其从地图中移除 - 完成后，请再次调用
setMarkers以重新绘制标记
更新代码：
var map;
var markers = []; //创建一个标记数组来保存你的标记
var beaches = [
['Bondi Beach'，10，10，4]，
['Coogee Beach'，10，11，5 ]，
['Cronulla Beach'，10，12，3]，
['Manly Beach'，10，13，2]，
['Maroubra Beach'，10，14， 1]
];
函数setMarkers（locations）{
for（var i = 0; i< locations.length; i ++）{
var beach = locations [i] ;
var myLatLng = new google.maps.LatLng（beach [1]，beach [2]）;
var marker = new google.maps.Marker（{
position：myLatLng，
map：map，
animation：google.maps.Animation.DROP，
title ：beach [0]，
zIndex：beach [3]
}）;
//将标记按压到标记数组
markers.push（marker）;
函数reloadMarkers（）{
//循环标记并将映射设置为null为每个
for（var i = 0; i< markers.length; i ++）{
markers [i] .setMap（null）;
}
//重置标记数组
markers = [];
//呼叫设置标记以重新添加标记
setMarkers（沙滩）;
函数初始化（）{
var mapOptions = {
zoom：5，
center：new google.maps.LatLng （10,12），
mapTypeId：google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map（document.getElementById（'map-canvas' ），mapOptions）;
setMarkers（海滩）;
//在按钮上绑定事件监听器以重新加载标记
document.getElementById（'reloadMarkers'）。addEventListener（'click'，reloadMarkers）;
}
initialize（）;
工作示例：
Here is my code(most code from Google's API page).
<script>
var beaches = [
['Bondi Beach', -12.890542, 120.274856, 4],
['Coogee Beach', -12.923036, 520.259052, 5],
['Cronulla Beach', -12.028249, 1221.157507, 3],
['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
['Maroubra Beach', -33.950198, 121.259302, 1]
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: beach[0],
zIndex: beach[3]
});
}
}
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(38.77417, -9.13417),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
setMarkers(map, beaches);
}
google.maps.event.addDomListener(window, 'load', initialize);
setInterval(function() { setMarkers(map, beaches); }, 5000);
</script>
What I simply want to do is reload only the markers. I tried reloading the map using initialize function but it didn't work. Then I tried to reloading using setMarkers function and still no luck...
Thanks for your help.
解决方案
Few things you should do / things that I have changed from your original code:
- Use valid lat/lng coordinates for your markers (1121.28747820854187 for example is not a valid lng)
- Create a global variable for your map (easier to reference in your script)
- Create an array to hold your markers
- I have added a marker animation
animation: google.maps.Animation.DROP,to your markers, so that you can see when they are reloaded, and a reload markers button to call the reload function.
Basically what you want to do is:
- Create each marker within the
setMarkersfunction - Push each marker to the
markersarray - When reloading your markers, loop through your markers array and call
setMap(null)on each marker to remove it from the map - Once done, call
setMarkersagain to re-draw your markers
Updated code:
var map;
var markers = []; // Create a marker array to hold your markers
var beaches = [
['Bondi Beach', 10, 10, 4],
['Coogee Beach', 10, 11, 5],
['Cronulla Beach', 10, 12, 3],
['Manly Beach', 10, 13, 2],
['Maroubra Beach', 10, 14, 1]
];
function setMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: beach[0],
zIndex: beach[3]
});
// Push marker to markers array
markers.push(marker);
}
}
function reloadMarkers() {
// Loop through markers and set map to null for each
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
}
// Reset the markers array
markers = [];
// Call set markers to re-add markers
setMarkers(beaches);
}
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(10,12),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(beaches);
// Bind event listener on button to reload markers
document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}
initialize();
Working example:
这篇关于在Google Maps API上重新加载标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
