删除标记谷歌地图API。什么时候缩放显示标记?

时间:2017-05-04 14:27:01

标签: javascript google-maps google-maps-api-3

删除标记时出现问题  我正确显示所有位置,但如果我点击删除标记的功能按钮,在第一次删除,但如果我移动地图或放大/缩小旧标记再来....? 我想删除

//show location
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
     var icons = {
       parking: {
         icon: iconBase + 'parking_lot_maps.png'
       },
       library: {
         icon: iconBase + 'library_maps.png'
       },
       info: {
         icon: iconBase + 'info-i_maps.png'
       }
     };

var map;
var markers = [];

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {
        lat: -15.7942357,
        lng: -47.8821945
      }
    });

     var infoWin = new google.maps.InfoWindow();

     markers = locations.map(function(location, i) {
        var marker = new google.maps.Marker({
          position: location,
          icon: icons[location.type].icon,
        });
        google.maps.event.addListener(marker, 'click', function(evt) {
          infoWin.setContent(location.info);
          infoWin.open(map, marker);
        })
    return marker;
});


  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}


// 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 = [];
      }


var locations = [{
  lat: -19.9286,
  lng: -43.93888,
  info: "marker 1",
  type: 'info',
  category: 'cat1'
}, {
  lat: -19.85758,
  lng: -43.9668,
  info: "<strong>marker 2</strong><br>ciaociao",
  type: 'library',
  category: 'cat1'

}
, {
  lat: -18.85758,
  lng: -42.9668,
  info: "<strong>marker 3</strong><br>ciaociao",
  type: 'library',
  category: 'cat2'

} ];

2 个答案:

答案 0 :(得分:1)

问题是我必须首先填充数组 删除/隐藏后 使用markers.push(marker); 而不是返回

locations.map(function(location, i) {
       var marker = new google.maps.Marker({
            position: location,
            icon: icons[location.type].icon,
            map: map
          });
        google.maps.event.addListener(marker, 'click', function(evt) {
          infoWin.setContent(location.info);
          infoWin.open(map, marker);
        })

    markers.push(marker);
});

这里的完整代码

//show location
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
     var icons = {
       parking: {
         icon: iconBase + 'parking_lot_maps.png'
       },
       library: {
         icon: iconBase + 'library_maps.png'
       },
       info: {
         icon: iconBase + 'info-i_maps.png'
       }
     };

var map;

var markers = [];
function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {
        lat: -15.7942357,
        lng: -47.8821945
      }
    });

     var infoWin = new google.maps.InfoWindow();



      locations.map(function(location, i) {
       var marker = new google.maps.Marker({
            position: location,
            icon: icons[location.type].icon,
            map: map
          });
        google.maps.event.addListener(marker, 'click', function(evt) {
          infoWin.setContent(location.info);
          infoWin.open(map, marker);
        })

    markers.push(marker);
});


  // Add a marker clusterer to manage the markers.
  //var markerCluster = new MarkerClusterer(map, markers, {
   // imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  //});

}


// 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 = [];
      }


var locations = [{
  lat: -19.9286,
  lng: -43.93888,
  info: "marker 1",
  type: 'info',
  category: 'cat1'
}, {
  lat: -19.85758,
  lng: -43.9668,
  info: "<strong>marker 2</strong><br>ciaociao",
  type: 'library',
  category: 'cat1'

}
, {
  lat: -18.85758,
  lng: -42.9668,
  info: "<strong>marker 3</strong><br>ciaociao",
  type: 'library',
  category: 'cat2'

} ];

答案 1 :(得分:0)

试试这个:

function clearMarkers() {
  setMapOnAll(null);
  for(i=0; i<markers.length; i++){
     markers[i].setMap(null);
  }
}

来自:Google Map API - Removing Markers

相关问题