Google Maps API V3 - 多个多边形的自定义信息框答案

【问题标题】：Google Maps API V3 - Custom infobox for multiple polygonsGoogle Maps API V3 - 多个多边形的自定义信息框
【发布时间】：2012-03-27 05:52:16
【问题描述】：

这是我第一次使用 Google Maps API。我有一个带有多个多边形的样式地图，每个多边形都需要自己的信息框。信息框需要样式化。我的问题是我根本无法让信息框工作。几天来我一直在寻找解决方案，我什至试过这个http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html我显然做错了什么。

这是我的代码：http://pastebin.com/M23PPXpn

【问题讨论】：

标签： google-maps-api-3 infowindow polygons

【解决方案1】：

我注意到将信息框附加到多边形会导致 infobox.js 中出现此错误

Uncaught TypeError: Object #<V> has no method 'getPosition'

这可能是因为多边形代表一个区域，而标记代表一个点。我建议在多边形内的某处创建一个不可见的标记来锚定每个信息框。

有了这个想法，我在澳大利亚多边形中添加了一个信息框。仍然为多边形创建点击侦听器，但它会打开与不可见标记相关联的信息框。

// ... 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
}

【讨论】：

太好了，谢谢！我改用了 infoBubble，但您对隐形标记的建议效果很好！
你是我的英雄！！几个星期以来，我一直在寻找这样的解决方案！

【解决方案2】：

用例子试试这个游乐场Playground

【讨论】：