Google Maps Utility Library V3のInfoboxを使用していますが、すべてのInfoboxを追跡したり、イベントリッスンを追加したりせずに、一度にすべてのInfoboxを削除するのに少し問題があります。
現在、次のコードを使用しています。
function initMarkers(map, markerData) {
for(var i=0; i<markerData.length; i++) {
var iconimage = "markers/" + trackall + ".png";
marker = new google.maps.Marker({
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: iconimage
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText
,disableAutoPan: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(20, -75)
,zIndex: null
,boxStyle: {
background: "url('') no-repeat"
,opacity: 0.75
,width: "140px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: ""
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black; margin-top: 5px; background: #E0E7EF; padding: 5px;";
boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//newMarkers[i].infobox.open(map, this);
//map.panTo(markerData[i].latLng);
//newMarkers[i].infobox.close();
/}
})(marker, i));
}
return newMarkers;
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
{ latLng: pointall}
]);
上記の例では、絶えず変化するマーカー情報を含む変数pointallを使用しています。このサイトはフライト追跡サイトであるため、さまざまな場所にある任意の数の航空機を常に追跡します。更新があるたびに、例えば。プロットする新しいマーカー。最初に古いマーカーを削除するには、次の関数を使用します。
function clearOverlays() {
if (newMarkers) {
for (var i = 0; i < newMarkers.length; i++ ) {
newMarkers[i].setMap(null);
}
}
}
上記はすべてのマーカーを削除しますが、追加すると
newMarkers[i].infobox.close();
最初のマーカーを削除しますが、コードの実行を停止します。
ただ言う簡単な方法はありますか..開いているすべてのインフォボックスを閉じます。それらはすべて閉じる必要があるので、どれがどれであるかを知る必要はありません。現在、インフォボックスは新しいマーカーで開かれていますが、古いインフォボックスはそのままです。
注:私はJavaScriptに精通していないので、気楽にやってください;)
どんな助けでもいただければ幸いです。
ありがとう
編集:私はここであまり運がありません。提案されたように、私はインフォボックスを保持するための配列を作成しようとしましたが、何か間違ったことをしているに違いありません。
次の宣言を追加してみました。
ibArray = [];
次に、追加してみました:
ibArray.push(marker);
マーカーをnewMarkers配列にプッシュした直後など、いくつかの場所に上記を追加しましたが、コードをどこに配置しても、残りのコードが壊れて、インフォボックスが表示されません。
構文が間違っているのではないかと思います。また、コードをどこに配置するかもわかりません。
他の誰かが助けることができますか?