如何清除谷歌地圖中的現有標記？

-1

的事情是，該功能clearAirports，不會清除任何現有的標記（或火災的-google-控制檯的任何錯誤），

googleMaps: { 
    map: null, 
    init: function() { 
     var self = this; 
     var $google_maps_item = $('#gmaps'); 
     if ($google_maps_item.length) { 

      var mapOptions = { 
       zoom: 5, 
       center: new google.maps.LatLng(39.615794, 2.998049), 
       scrollwheel: false, 
       zoomControl: false, 
       mapTypeControl: false, 
       scaleControl: false, 
       streetViewControl: false, 
       rotateControl: false, 
       disableDefaultUI: true 
      }; 
      self.map = new google.maps.Map(document.getElementById("gmaps"), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng($google_maps_item.data('lat'), $google_maps_item.data('long')), 
       map: self.map, 
       icon: { 
        path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", 
        scale: 0.6, 
        strokeWeight: 0.2, 
        strokeColor: 'black', 
        strokeOpacity: 1, 
        fillColor: '#003547', 
        fillOpacity: 0.85, 
       } 
      });   
      self.drawAirports(); 

     } 
    }, 
    drawAirports: function() { 
     var self = this; 
     var markers = []; 



     var $airports = $('.airport_list ul li:visible'); 
     var airports = []; 

     console.log('hemos detectado ' + $airports.length + ' visibles'); 

     $airports.each(function() { 
      var airport = { 
       'airport' : $(this).data('titulo'), 
       'lat' : $(this).data('lat'), 
       'long' : $(this).data('long'), 
       'href' : $(this).data('href') 
      } 
      airports[airports.length] = airport; 
     }); 


     var infobox = null; 
     for (var i = 0; i < airports.length; i++) { 
       (function (airport) { 
        console.log (base_url + 'img/gmaps/marker.png'); 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(airport.lat, airport.long), 
         map: self.map, 
         title: airport.airport, 
         icon: base_url + 'img/gmaps/marker.png', 
         visible: true 
        }); 

        google.maps.event.addListener(marker, 'click', function() { 
         if(infobox) { 
          infobox.close(); 
         } 
         infobox = new InfoBox({ 
          content: '<h3>' + airport.airport + '</h3><a class="info" href=""><span>Información</span></a><a class="bags" href=""><span>Equipajes</span></a>', 
          disableAutoPan: false, 
          maxWidth: 150, 
          pixelOffset: new google.maps.Size(-212, -150), 
          zIndex: null, 
          boxStyle: { 
           width: "280px" 
          }, 
          closeBoxMargin: "0", 
          closeBoxURL: base_url + "img/gmaps/close.png", 
          infoBoxClearance: new google.maps.Size(1, 1) 
         }); 
         infobox.open(map, this); 
         map.panTo(marker.position); 
        }); 

        markers.push(marker); 
       })(airports[i]); 
      } 
    }, 
    clearAirports: function() { 
     google.maps.Map.prototype.clearMarkers = function() { 
      if (this.markers !== undefined && this.markers !== 'undefined') { 
       console.log(this.markers.length + ' Markers to clear'); 
       for(var i=0; i < this.markers.length; i++){ 
        this.markers[i].setMap(null); 
       } 
       this.markers = new Array(); 
      }    
     }; 

     this.map.clearMarkers(); 
    } 
}

任何想法我做錯了什麼？我從here接過功能..

來源

2016-07-14 Toni Michel Caubet

添加markers爲googleMaps對象的屬性，添加所有標誌物，然後調整clearAirports功能位：

googleMaps: { 
    map: null, 
    markers: [], //HERE 
    init: function() { 
     var self = this; 
     var $google_maps_item = $('#gmaps'); 
     if ($google_maps_item.length) { 

      var mapOptions = { 
       zoom: 5, 
       center: new google.maps.LatLng(39.615794, 2.998049), 
       scrollwheel: false, 
       zoomControl: false, 
       mapTypeControl: false, 
       scaleControl: false, 
       streetViewControl: false, 
       rotateControl: false, 
       disableDefaultUI: true 
      }; 
      self.map = new google.maps.Map(document.getElementById("gmaps"), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng($google_maps_item.data('lat'), $google_maps_item.data('long')), 
       map: self.map, 
       icon: { 
        path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", 
        scale: 0.6, 
        strokeWeight: 0.2, 
        strokeColor: 'black', 
        strokeOpacity: 1, 
        fillColor: '#003547', 
        fillOpacity: 0.85, 
       } 
      }); 
      self.markers.push(marker); //HERE: remove if you don't want to add the first marker to the array  
      self.drawAirports(); 

     } 
    }, 
    drawAirports: function() { 
     var self = this; 



     var $airports = $('.airport_list ul li:visible'); 
     var airports = []; 

     console.log('hemos detectado ' + $airports.length + ' visibles'); 

     $airports.each(function() { 
      var airport = { 
       'airport' : $(this).data('titulo'), 
       'lat' : $(this).data('lat'), 
       'long' : $(this).data('long'), 
       'href' : $(this).data('href') 
      } 
      airports[airports.length] = airport; 
     }); 


     var infobox = null; 
     for (var i = 0; i < airports.length; i++) { 
       (function (airport) { 
        console.log (base_url + 'img/gmaps/marker.png'); 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(airport.lat, airport.long), 
         map: self.map, 
         title: airport.airport, 
         icon: base_url + 'img/gmaps/marker.png', 
         visible: true 
        }); 

        google.maps.event.addListener(marker, 'click', function() { 
         if(infobox) { 
          infobox.close(); 
         } 
         infobox = new InfoBox({ 
          content: '<h3>' + airport.airport + '</h3><a class="info" href=""><span>Información</span></a><a class="bags" href=""><span>Equipajes</span></a>', 
          disableAutoPan: false, 
          maxWidth: 150, 
          pixelOffset: new google.maps.Size(-212, -150), 
          zIndex: null, 
          boxStyle: { 
           width: "280px" 
          }, 
          closeBoxMargin: "0", 
          closeBoxURL: base_url + "img/gmaps/close.png", 
          infoBoxClearance: new google.maps.Size(1, 1) 
         }); 
         infobox.open(map, this); 
         map.panTo(marker.position); 
        }); 

        self.markers.push(marker); //HERE 
       })(airports[i]); 
      } 
    }, 
    clearAirports: function() { //We don't need to define google.maps.Map.prototype.clearMarkers, just clear them right here 
     console.log(this.markers.length + ' Markers to clear'); 
     for(var i=0; i < this.markers.length; i++){ 
       this.markers[i].setMap(null); 
     } 
     this.markers = new Array(); 
    } 
}

來源

2016-07-14 12:21:39

聲明在窗口可視區域內的標記陣列..所以你可以在這個陣列設置爲null realetd地圖上進行迭代，並..

// move this outside the drawAirpots function 
    var markers = [];

的迭代上

for (i = 0; i< markers.length; i++) { 

    markers[i].setMap(null); 
    }

來源

2016-07-14 12:05:39 scaisEdge

我不明白，怎麼樣this.marker.setMap（null）？它會觸發：「TypeError：無法讀取未定義的屬性」長度「，現在我將標記移出drawArports func –

我有一個錯誤..我已經更新了答案 – scaisEdge

源代碼如下。 Run and Try here。

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Remove Markers</title> 
     <style> 
      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      #map { 
      height: 100%; 
      } 
      #floating-panel { 
      position: absolute; 
      top: 10px; 
      left: 25%; 
      z-index: 5; 
      background-color: #fff; 
      padding: 5px; 
      border: 1px solid #999; 
      text-align: center; 
      font-family: 'Roboto','sans-serif'; 
      line-height: 30px; 
      padding-left: 10px; 
      } 
     </style> 
     </head> 
     <body> 
     <div id="floating-panel"> 
      <input onclick="clearMarkers();" type=button value="Hide Markers"> 
      <input onclick="showMarkers();" type=button value="Show All Markers"> 
      <input onclick="deleteMarkers();" type=button value="Delete Markers"> 
     </div> 
     <div id="map"></div> 
     <p>Click on the map to add markers.</p> 
     <script> 

      // In the following example, markers appear when the user clicks on the map. 
      // The markers are stored in an array. 
      // The user can then click an option to hide, show or delete the markers. 
      var map; 
      var markers = []; 

      function initMap() { 
      var haightAshbury = {lat: 37.769, lng: -122.446}; 

      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 12, 
       center: haightAshbury, 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }); 

      // This event listener will call addMarker() when the map is clicked. 
      map.addListener('click', function(event) { 
       addMarker(event.latLng); 
      }); 

      // Adds a marker at the center of the map. 
      addMarker(haightAshbury); 
      } 

      // Adds a marker to the map and push to the array. 
      function addMarker(location) { 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
      }); 
      markers.push(marker); 
      } 

      // Sets the map on all markers in the array. 
      function setMapOnAll(map) { 
      for (var i = 0; i < markers.length; i++) { 
       markers[i].setMap(map); 
      } 
      } 

      // Removes the markers from the map, but keeps them in the array. 
      function clearMarkers() { 
      setMapOnAll(null); 
      } 

      // Shows any markers currently in the array. 
      function showMarkers() { 
      setMapOnAll(map); 
      } 

      // Deletes all markers in the array by removing references to them. 
      function deleteMarkers() { 
      clearMarkers(); 
      markers = []; 
      } 
     </script> 
     <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
     </script> 
     </body> 
    </html>

來源

2016-07-14 12:23:59

如何清除谷歌地圖中的現有標記？

回答

相關問題