带有信息窗口的多个标记
Multiple markers with infowindow
我们使用带有信息窗口的多个标记。一切正常。问题是当我们单击标记时,信息窗口会打开,但在单击其他标记时不会关闭。它保持打开状态。所以可以给出这个问题的解决方案。
代码在 http://goo.gl/s0WZx
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
var contentString = $("#pop"+iterator).html();
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300,
maxHeight: 500
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
iterator++;
}
您正在创建尽可能多的infowindow
,就像有标记一样多。在您的情况下,我认为一个infowindow
就足够了。因此,对于仅使用一个infowindow
,您可以在全局范围内实现这一点:
//Using lazy initialization.
//InfoWindow will be created only after the first call
var getInfoWindow = (function(){
var _instance = null;
return function(){
if(_instance == null){
_instance = new google.maps.InfoWindow({
maxWidth: 300,
maxHeight: 500
});
}
return _instance;
};
})();
此外,您还需要存储必须在点击事件中显示的每个标记的contentString
。因此addMarker
方法的最终修改将是这样的:
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
//Storing content html
marker.contentString = $("#pop"+iterator).html();
google.maps.event.addListener(marker, 'click', function() {
//Setting content of InfoWindow
getInfoWindow().setContent( marker.contentString );
//Opening
getInfoWindow().open(map,marker);
});
iterator++;
}
将 var 信息窗口放在 addMarker 函数之外。喜欢这个:
var infowindow = new google.maps.InfoWindow();
然后在你的addMarker函数中使用
infowindow.setContent(contentString);
这样,信息窗口仅创建一次。单击不同的标记只会移动窗口并设置内容。
相关文章:
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- 谷歌地图点击潜水触发信息窗口
- 将FlowPlayer嵌入谷歌地图信息窗口
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 当我浏览回页面时,谷歌地图信息窗口不会弹出
- 谷歌地图信息窗口Z索引
- 如何隐藏标记簇内标记的信息窗口
- 谷歌地图信息窗口为每个标记显示相同的内容
- 更改内容信息窗口映射v3
- Cartodb信息窗口未在地图上显示变量
- 为位于路线上的谷歌地图标记(起点和终点)设置一个信息窗口
- 信息窗口谷歌地图点击事件给出错误
- Javascript谷歌地图每个信息窗口
- 更新打开的谷歌地图信息窗口
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- 在弹出窗口中获取信息
- 禁用角度地图中标记和信息窗口的ng点击
- 在谷歌地图的信息窗口内点击按钮
- 谷歌从数组中映射标记、折线和窗口信息
- 使用javascript打开一个带有前一个窗口信息的新窗口