2012-11-17 95 views
0

可能重複:
Google Maps API v3: How to remove all markers?刪除舊地圖標記並加載新標記?

我試圖刪除舊的標記和加載新的。

這裏是我有一個負載在頁面加載某些標記代碼 - 這裏沒有任何問題:

  (function() { 

      var customIcons = { 
    1: { 
    icon: 'redmarker.png', 
    shadow: 'markershadow.png' 
    }, 
    2: { 
    icon: 'purplemarker.png', 
    shadow: 'markershadow.png' 
    }, 
    3: { 
    icon: 'silvermarker.png', 
    shadow: 'markershadow.png' 
    }, 
    4: { 
    icon: 'goldmarker.png', 
    shadow: 'markershadow.png' 
    } 
}; 


       window.onload = function(){ 
        var MY_MAPTYPE_ID = 'custom'; 
        var stylez = [ { "stylers": [ { "hue": "#00ccff" }, { "saturation": -100 }, { "lightness": 5 } ] },{ } ]; 
        var latlng = new google.maps.LatLng(10, 10); 
        var options = { 
         zoom: 16, 
         center: latlng, 
         panControl: false, 
         zoomControl: false, 
        scaleControl: true, 

         mapTypeControlOptions: { 
         mapTypeIds: [MY_MAPTYPE_ID,google.maps.MapTypeId.SATELLITE] 
         }, 

         mapTypeId: MY_MAPTYPE_ID 
        }; 
        var map = new google.maps.Map(document.getElementById('map'), options); 
        var styledMapOptions = { 
         name: 'Map' 
        }; 
        var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions); 
        map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType); 


        var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("getxml.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("id"); 
     var address = markers[i].getAttribute("id"); 
     var type = markers[i].getAttribute("venue_type"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 



//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
//BUTTON SWITCHING //////////////////////////////////////////////////////////// 
jQuery(document).delegate(".topCanBeActive", "click", function(e) { 
    e.preventDefault(); 
    jQuery(".topCanBeActive").removeClass("topActive"); 
    jQuery(this).addClass("topActive"); 

    switch(this.id){ 
      case 'all_activity_button': 
        alert("search"); 
      break; 
     case 'events_button': 

downloadUrl("getxml2.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("id"); 
      var address = markers[i].getAttribute("id"); 
      var type = markers[i].getAttribute("venue_type"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<b>" + name + "</b> <br/>" + address; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 


      break; 
     case 'venues_button': 
      alert("venues"); 
      break; 
     case 'search_button': 
      alert("search");   
      break; 
    } 
}); 


//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 
//END //////////////////////////////////////////////////////////// 


       } 

       function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 


    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

      })(); 

現在,我創建了這裏,如果你按下一個按鍵,不同的XML文件加載的按鈕部分。注意//////////////////////部分然而,點擊按鈕後,什麼也沒有發生。 XML文件本身沒問題,並加載所需的數據。我也沒有收到螢火蟲的錯誤。

任何想法,爲什麼會發生這種情況?

謝謝!

+0

你做了什麼來刪除現有的標記? – geocodezip

回答

3

此問題已經回答之前。 要查看一個很好的描述的回答,請訪問:

Google Maps API v3: How to remove all markers?

首先回答讓你知道的解決方案。

-

它真正告訴你的是,你必須標記存儲了數組,然後循環再槽和的setMap爲null。

實施例:

markerVar.setMap(null); 

之後可以取消設置然後/重置陣列和在新的標誌物填充。