为了获得自定义信息窗口,我第一次使用谷歌地图 API V3 的 InfoBox 插件。我有带有 google 地方 API 内容的信息框在点击时打开。但是当我单击一个新标记时,以前的信息框不会关闭。我只希望一次打开一个信息框。我试图按照以下问题中的指导进行操作:Google Map V3 - Allow only one infobox to be display at a time in my own code。这是我的代码的相关部分:
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
var request = {
reference: place.reference
};
google.maps.event.addListener(marker,'click',function(e){
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
boxText.innerHTML = '<br><div><div style="font-size: 18px; vertical-align:top; border:2px solid; background-color:; color: #555555;"><b> '+place.name+'</b>';
if (!!place.website) contentStr += ' <a target="_blank" href="'+place.website+'"><img src="img/arrow.png" style="position:absolute; bottom:0px: right:0px; height:22px; width:22px;"></img></a></div></div>';
ib.close();
ib.open(map, marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
ib.close();
ib.open(map, marker);
}
});
});
gmarkers.push(marker);
不幸的是,我一次仍然有多个信息窗口。还有另一个选项来设置不需要加载另一个脚本的 google API 信息窗口的样式吗?这将在移动网站上运行,如果有办法只使用 CSS3,那将是更可取的。