2013-09-10 61 views
0

我從位置的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太長。我會很欣賞任何建議,或暗示,甚至是「你爲什麼這樣做?」

回答

0

由MarkerMangager顯示的標記並不是您所創建的標記(和供應量作爲參數傳遞給mgr.addMarker()),該MarkerManager創造了新的實例和這些實例也不會當你刪除存儲在markersArray的標記(什麼不刪除有任何的視覺效果,因爲存儲在markersArray標記是不可見的)

你可以叫mgr.clearMarkers()deleteOverlays()也刪除了該MarkerManager創建的實例,但隨着markersArray完整的做法是不必要的。您完全不需要這個陣列,只需撥打mgr.clearMarkers()即可刪除可見的標記。