我從位置的MySQL數據庫表中拉出標記,它使用嵌套集合模型進行層次分類。 這部分工作正常。 我可以在地圖上放置所有標記,使用MarkerManager以不同縮放級別顯示/隱藏(使用我的表格中的「深度」字段)。這很好。 我的問題是,如果點擊某個國家的標記,我想要移除該國家以外的所有標記。獲取一個國家的標記是微不足道的,我只是向xhr函數提供一個父id。但清除標記......這是困擾我。我一直在爲它工作好幾天,似乎無法取得進展。Google Maps API v.3在標記上清除和添加標記點擊
這裏的JS
var map = new google.maps.Map(document.getElementById('gMap'), mapOptions);
// init the markerManager
var mgr = new MarkerManager(map);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('Dark', darkMap);
map.mapTypes.set('Light', lightMap);
map.setMapTypeId('Dark');
// lat lng bounds for center/zoom marker
var bounds = new google.maps.LatLngBounds();
// infowindow (infobox)
// init here, and re-use
var ib = new InfoBox();
var oldDraw = ib.draw;
ib.draw = function() {
oldDraw.apply(this);
jQuery(ib.div_).hide();
jQuery(ib.div_).fadeIn('slow');
}
// init marker list
// for removing 'old' markers and loading new ones
var markersArray= [];
// load markers from database
function loadMarkers(params) {
var params = params || {};
var pid = params.pid || 5;
deleteOverlays(pid,function(){
// alert("deleteOverlays(" + pid + ");")
$.getJSON('/map/xhr_get_descendants', {
pid : pid
}, function(data) {
var bounds = new google.maps.LatLngBounds();
$.each(data, function(key, val) {
if (val.lat_long && val.lat_long != '') {
var name = val.name;
var id = val.id;
var depth = val.depth;
var children = val.children;
var pos = val.lat_long.split(',');
var lat = parseFloat(pos[0]);
var long = parseFloat(pos[1]);
var myLatLng = new google.maps.LatLng(lat, long);
var html = "<b>NAME=>" + name + "\nID=>" + id + "\nDEPTH=>" + depth+"</b>";
var marker = new google.maps.Marker({
position : myLatLng
});
mgr.addMarker(marker, depth);
markersArray.push(marker);
var boxText = document.createElement("div");
google.maps.event.addListener(marker, 'mouseover', function() {
/*
getStats(id);
// */
boxText.innerHTML = html;
var infoBoxOptions = {
content : boxText,
disableAutoPan : true,
maxWidth : 0,
pixelOffset : new google.maps.Size(-140, 0),
zIndex : null,
boxClass : "infoBox",
closeBoxMargin : "2px 2px 2px 2px",
closeBoxURL : "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance : new google.maps.Size(10, 10),
isHidden : false,
pane : "floatPane",
enableEventPropagation : false,
};
ib.setOptions(infoBoxOptions);
ib.open(map, marker);
})
google.maps.event.addListener(marker, 'mouseout', function() {
ib.close();
})
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
// getLinks(id);
if (children > 0) {
loadMarkers({
pid : id
});
}
})
bounds.extend(myLatLng);
}
});
map.fitBounds(bounds);
});
});
}
// clear markers
function deleteOverlays(pid,callback){
if((markersArray)&&(markersArray.length > 1)) {
for (var x in markersArray) {
markersArray[x].setMap(null);
markersArray[x]=null;
}
markersArray=[];
};
callback(pid);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
loadMarkers({
pid:5
});
業務端的那麼快,你可以看到,我送父ID到loadMarkers()除其他事項外,如果有必要,並做一些東西,然後我稱之爲deleteMarkers()函數,其回調函數創建標記,將它們添加到管理器和主標記中。爲簡潔起見,我不打算將完整的Ajax調用添加到xhr_get_descendants /因爲沒有該模型會有點沒有意義。 無論如何,該函數返回所提供的父ID的每個「孩子」的ID,名稱,深度以及這些孩子中每個孩子可能擁有多少個孩子。
我的意思是...這應該工作! LOL 我一直在尋找它wayyyy太長。我會很欣賞任何建議,或暗示,甚至是「你爲什麼這樣做?」