Google Maps API V3 - 複数の多角形のカスタムInfoBox
-
10-12-2019 - |
質問
これはGoogle Maps APIを使った初めてです。私はそれぞれ彼ら自身のInfoBoxを必要とする多数の多角形のスタイルのマップを持っています。Infoboxesはスタイルが必要です。私の問題は私がInfoboxesがまったく仕事をすることができないということです。私は今日の解決策を探しています、私はこれを試してみました。
これは私のコードです: http://pastebin.com/m23ppxpn
解決
InfoBoxにInfoBoxをポリゴンに添付することは、InfoBox.js のこのエラーにあることに気づいた。
Uncaught TypeError: Object #<V> has no method 'getPosition'
.
多角形が面積を表し、マーカーは点を表すためです。私はあなたのポリゴン内のどこかの無見なマーカーをそのinfoboxをアンカーにするための単一の見えないマーカーを作成することをお勧めします。
この考えを得て、私はオーストラリアポリゴンにInfoBoxを追加しました。クリックリスナーはまだポリゴン用に作成されますが、インフォボックスが目に見えないマーカーに接続されています。
// ... 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
}
. 他のヒント
examples 遊び場
所属していません StackOverflow