私は本当にここで立ち往生しています。誰かが助けることができれば、それは大歓迎です。
私はすべてのコードを以下に基づいています: google maps api infobox プラグインと複数の マーカー これは私が問題を抱えているところです。
基本的には、複数のマーカーと複数のインフォボックスが必要であり、両方を配列で追跡できるようにすることで、それらをすべてマップから削除して、新しいマーカーとインフォボックスでやり直すことができます。このサイトはフライト トラッカーであるため、マーカーとインフォボックスは常に変化しています。一括削除のすべてのインフォボックスを追跡することはできないようです。変更を加えるたびに、サイトの既存のコードが壊れてしまうため、何もうまくいかないようです。
これが私の影響を受けるすべてのコードです。コメントアウトされたすべてのコードから、私があらゆる種類のことを試してきたことがわかります。
任意の支援をいただければ幸いです。
newMarkers = [],
marker;
ibArray = [];
function initialize() {
chatswood = new google.maps.LatLng(-33.945759, 151.180358);
myMapOptions = {
zoom: 9
,center: chatswood
,mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
}
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");
boxText.style.cssText = "border: 1px solid black; margin-top: 5px; background: #E0E7EF; padding: 5px;";
boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
//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); //Adding the marker to the newMarkers Array
newMarkers[i].infobox = new InfoBox(infoboxOptions); //Create new Infobox
newMarkers[i].infobox.open(map, marker); //Open Infobox
// ibArray.push({myId:ModeS,box: ib});
//ibArray.push(marker);
//ib[i] = new InfoBox(infoboxOptions);
//ibArray.push({myId: ModeS,box: ib});
//ib.open(map, marker);
// ibArray.push({myId:ModeS,box: ib});
//Open box when page is loaded
//ibArray.push({myId:"ModeS",box: newMarkers});
// 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);
// }
// })(marker, i));
//-------------------------------------------------------------------------
}
return newMarkers;
}
// Note: I commented out the listener event because the Infoboxes are to appear
// automatically and there won't be any user interaction on the individual
// markers. Going by the comments above though I believe I need to return
// the function but I'm not sure how if I'm not using the listener event.
// 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}
]);
boxText.innerHTML = aircrafttooltip;
//Function to close the Infoboxes
function closeBox(id){
for (i=0;i<ibArray.length;i++) {
if (ibArray[i].myId==id){
myBox = ibArray[i].box;
myBox.close();
}
}
}
// Function to remove markers
function clearOverlays() {
if (newMarkers) {
for (var i = 0; i < newMarkers.length; i++ ) {
newMarkers[i].setMap(null);
}
newMarkers.length = 0;
}
}