Google Maps API V3 - 为多个多边形定制信息框 [英] Google Maps API V3 - Custom infobox for multiple polygons
问题描述
这是我第一次使用Google Maps API。我有一个带多个多边形的样式化地图,每个多边形都需要自己的信息框。信息框需要风格化。我的问题是,我根本无法获取信息框。我现在一直在寻找解决方案,我甚至试过这个 http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html 我必须明显地做错了什么。
This is my first time working with the Google Maps API. I have a styled map with multiple polygons that each need their own infobox. The infoboxes need to be styled. My problem is that I can't get the infoboxes to work at all. I've been looking for a solution for days now, I've even tried this http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html I must obviously be doing something wrong.
以下是我的代码: http://pastebin.com/M23PPXpn
推荐答案
我注意到,将Infobox附加到多边形结果在infobox.js的这个错误中
I noticed that attaching an Infobox to a polygon results in this error in infobox.js
Uncaught TypeError: Object #<V> has no method 'getPosition'
可能是因为多边形代表一个区域,而标记代表点。我建议在多边形内的某个地方创建一个不可见的标记,以便锚定每个信息框。
It could be because a polygon represents an area, while a marker represents a point. I suggest creating a single invisible marker somewhere inside your polygons to anchor each infobox.
有了这个想法,我在澳大利亚多边形中添加了一个信息框。点击监听器仍然是为多边形创建的,但它会打开与不可见标记绑定的信息框。
With this idea, I added a infobox to the Australia polygon. The click listener is still created for the polygon, but it opens the infobox tied to the invisible marker.
// ... this is near the end of your code...
australia_new_zealand.setMap(map);
google.maps.event.addListener(australia_new_zealand, 'mouseover', function() {
this.setOptions({fillColor: "#28d1e9"});
});
google.maps.event.addListener(australia_new_zealand, 'mouseout',function(){
this.setOptions({fillColor: "#06376a"});
});
// marker inside the Australia polygon, LatLng was manually defined
var australia_new_zealand_center = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-24.5271348225978, 134.296875),
visible: false
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: { background: "url('tipbox.gif') 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
}
// listener responds to a click inside polygon
google.maps.event.addListener(australia_new_zealand, "click", function (e) {
ib.open(map, australia_new_zealand_center);
});
var ib = new InfoBox(myOptions);
//(end) REGION - AUSTRALIA NEW ZEALAND
}
这篇关于Google Maps API V3 - 为多个多边形定制信息框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!