以间隔更新多个信息窗口
Update multiple infowindow with interval
我想在 ajax 请求后更新我所有的信息windows,即使它打开了,我正在使用地图 api v3。我能够更新我的标记和位置但不能更新信息窗口,我也遵循了 this 方法。你可以在下面查看我的代码。当前片段也为每个 window 设置相同的内容,您可以在打开信息 window 时查看它,然后单击 "Update" 按钮。
var locations = [
[
"New Mermaid",
36.9079,
-76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224,
-76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
[
"A Rising Community",
36.95298,
-76.25158,
3,
"Steven F. Morris",
"Judy Boone Realty",
"Norfolk City Library - Pretlow Branch, 9640 Granby St.",
"coming soon"
],
[
"A School Of Fish",
36.88909,
-76.26055,
4,
"Steven F. Morris",
"Sandfiddler Pawn Shop",
"5429 Tidewater Dr.",
"found"
]
]
var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: {
url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
size: new google.maps.Size(60, 60)
},
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
$(document).ready(function () {
function updateMarkers(m) {
$.each(m, function (i, mkr) {
pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
mkr.setPosition(pos);
infowindow.setContent('<div>Update:'+locations[i][7]+'</div>');/**/
});
};
$('#update').click(function () {
updateMarkers(markers);
})
});
#update{
font-family:arial;
background:#fff;
padding:10px;
border-radius:5px;
display:inline-block;
margin:10px;
cursor:pointer;
box-shadow:0 0 3px rgba(0,0,0,.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a id="update">UPDATE</a>
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
您有一组 4 个标记,但只有一个信息窗口。因此,当您调用 updateMarkers
时,您会循环 4 次,设置一个信息窗口的内容。最终信息窗口只有数组中最后一项的内容。
但是,标记的点击事件侦听器中的 setContent
会覆盖您可能已在信息窗口中设置的任何内容。您还需要在调用 updateMarkers 时删除该事件侦听器。
我想说的是将标记的点击事件侦听器移动到它自己的函数中,您可以在最初创建标记时和更新标记时都调用它。
有点像:
var openMarker;
function updateInfowindow(marker, content) {
marker.addListener('click', (function (marker, content) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: {
url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
size: new google.maps.Size(60, 60)
},
map: map,
index: i
});
updateInfowindow(marker, locations[i][0] + ', ' + locations[i][6]);
marker.addListener('click', function () {
openMarker = this.index;
});
markers.push(marker);
}
$(document).ready(function () {
function updateMarkers(m) {
$.each(m, function (i, mkr) {
pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
mkr.setPosition(pos);
updateInfowindow(mkr, '<div>Update:'+locations[i][7]+'</div>');
if (openMarker == i) {
google.maps.event.trigger(mkr, 'click');
}
});
};
$('#update').click(function () {
updateMarkers(markers);
})
});
更新: 您或许可以使用一个全局变量来跟踪最后点击了哪个标记。我为每个标记添加了自定义 'index' 属性。然后,当您更新标记时,检查每个标记以查看它是否是打开的。如果是这样,再次触发点击,这应该会重新打开信息窗口。我认为这应该有效。
我想在 ajax 请求后更新我所有的信息windows,即使它打开了,我正在使用地图 api v3。我能够更新我的标记和位置但不能更新信息窗口,我也遵循了 this 方法。你可以在下面查看我的代码。当前片段也为每个 window 设置相同的内容,您可以在打开信息 window 时查看它,然后单击 "Update" 按钮。
var locations = [
[
"New Mermaid",
36.9079,
-76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224,
-76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
[
"A Rising Community",
36.95298,
-76.25158,
3,
"Steven F. Morris",
"Judy Boone Realty",
"Norfolk City Library - Pretlow Branch, 9640 Granby St.",
"coming soon"
],
[
"A School Of Fish",
36.88909,
-76.26055,
4,
"Steven F. Morris",
"Sandfiddler Pawn Shop",
"5429 Tidewater Dr.",
"found"
]
]
var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: {
url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
size: new google.maps.Size(60, 60)
},
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
$(document).ready(function () {
function updateMarkers(m) {
$.each(m, function (i, mkr) {
pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
mkr.setPosition(pos);
infowindow.setContent('<div>Update:'+locations[i][7]+'</div>');/**/
});
};
$('#update').click(function () {
updateMarkers(markers);
})
});
#update{
font-family:arial;
background:#fff;
padding:10px;
border-radius:5px;
display:inline-block;
margin:10px;
cursor:pointer;
box-shadow:0 0 3px rgba(0,0,0,.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a id="update">UPDATE</a>
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
您有一组 4 个标记,但只有一个信息窗口。因此,当您调用 updateMarkers
时,您会循环 4 次,设置一个信息窗口的内容。最终信息窗口只有数组中最后一项的内容。
但是,标记的点击事件侦听器中的 setContent
会覆盖您可能已在信息窗口中设置的任何内容。您还需要在调用 updateMarkers 时删除该事件侦听器。
我想说的是将标记的点击事件侦听器移动到它自己的函数中,您可以在最初创建标记时和更新标记时都调用它。
有点像:
var openMarker;
function updateInfowindow(marker, content) {
marker.addListener('click', (function (marker, content) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: {
url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
size: new google.maps.Size(60, 60)
},
map: map,
index: i
});
updateInfowindow(marker, locations[i][0] + ', ' + locations[i][6]);
marker.addListener('click', function () {
openMarker = this.index;
});
markers.push(marker);
}
$(document).ready(function () {
function updateMarkers(m) {
$.each(m, function (i, mkr) {
pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
mkr.setPosition(pos);
updateInfowindow(mkr, '<div>Update:'+locations[i][7]+'</div>');
if (openMarker == i) {
google.maps.event.trigger(mkr, 'click');
}
});
};
$('#update').click(function () {
updateMarkers(markers);
})
});
更新: 您或许可以使用一个全局变量来跟踪最后点击了哪个标记。我为每个标记添加了自定义 'index' 属性。然后,当您更新标记时,检查每个标记以查看它是否是打开的。如果是这样,再次触发点击,这应该会重新打开信息窗口。我认为这应该有效。