getDetails，但无法删除

getDetails but cannot remove

本文关键字：删除 getDetails      更新时间：2024-06-21

我在谷歌地图v3上获取了标记调用标记的getDetails。场所内部搜索：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
    <title>Places search box</title> 
    <script type='text/javascript' src='sortable/ext/jquery-1.9.1.js'></script>
    <script type="text/javascript" src="sortable/ext/jquery-ui.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
    var markers = [];
    var map;
    var marker;
function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //CAN REVIEW FOR CURRENT LOCATION
    var mapOptions = {
        zoom: 8,
        mapTypeId: 'roadmap'
    };
    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(0, 0));
    map.fitBounds(defaultBounds);
    // Create the search box and link it to the UI element.
    var input = /** @type {HTMLInputElement} */(
        document.getElementById('pac-input'));
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));
    // [START region_getplaces]
    // Listen for the event fired when the user selects an item from the
    // pick list. Retrieve the matching places for that item.
    google.maps.event.addListener(searchBox, 'places_changed', function() {
        var places = searchBox.getPlaces();
        //Taking input into array
        var item = document.getElementById("pac-input");
    if (places.length == 0) {
        return;
    }
    //for (var i = 0, marker; marker = markers[i]; i++) {
    google.maps.Map.prototype.clearMarkers = function() {
    for (var i = 0; i < this.markers.length; i++) {
        this.markers[i].setMap(null);
        map.setZoom(8);
    }
    this.markers = new Array();
    markers.length = 0;
    }
    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      // Create a marker for each place.
        var marker = new google.maps.Marker({
            place_id: place.place_id
        });

        //Infowindow
        var infowindow = new google.maps.InfoWindow({
              //content: content
          });
        //Details Services
        var request = {
            placeId: marker.place_id
        };
        service = new google.maps.places.PlacesService(map);
        service.getDetails(request, function(place, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
              });
              google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
              });
            }
          });
        markers.push(marker);
        //searchmarkers.push(marker);
        bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
    //map.fitBounds(places[0].geometry.viewport);
    map.setZoom(12);
  });
// [END region_getplaces]
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas" class="dropit" style="float:left;width:70%;height:100%;"></div>
  </body>
</html>

我没有复制所有的代码，所以它看起来有点失真。我的问题是，每次我做一个地方搜索，它会很好。但如果我做额外的地方搜索。。它会堆积起来的。我似乎无法从getDetails中删除现有的标记。。

我删除了markers.push(marker);，但它仍在添加标记，无法删除。

建议？

编辑：

更新了代码。请注意，getDetails还显示了一组标记，我无法删除这些标记。我删除了最初从搜索框中的标记。。。但我需要place_Id，所以我保留了它以便在getDetails上使用。

请帮助删除所有标记。。。

编辑2:

谢谢地理编码。请使用他创建的小提琴进行调试。。。似乎仍然无法使其工作。http://jsfiddle.net/dw7moor5/

注意如何搜索两个不同的东西，剩余的东西仍然会出现。

您的代码中存在语法错误。下面代码段中的工作版本。将标记和边界添加到地图对象中，您不必这样做，但需要保持一致。

var map;
google.maps.Map.prototype.clearMarkers = function() {
  if (this.markers && this.markers.length > 0) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(null);
      if (!!map) map.setZoom(8);
    }
  }
  this.markers = [];
  this.markers.length = 0;
}
function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  //CAN REVIEW FOR CURRENT LOCATION
  var mapOptions = {
    zoom: 8,
    mapTypeId: 'roadmap'
  };
  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(0, 0));
  map.fitBounds(defaultBounds);
  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */
    (input));
  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    map.clearMarkers();
    var places = searchBox.getPlaces();
    //Taking input into array
    var item = document.getElementById("pac-input");
    if (places.length == 0) {
      return;
    }
    map._bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      //Infowindow
      var infowindow = new google.maps.InfoWindow({
        //content: content
      });
      //Details Services
      var request = {
        placeId: place.place_id
      };
      service = new google.maps.places.PlacesService(map);
      service.getDetails(request, function(place, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
          });
          map.markers.push(marker);
          map._bounds.extend(marker.getPosition());
          map.fitBounds(map._bounds);
        }
      });
      //searchmarkers.push(marker);
      map._bounds.extend(place.geometry.location);
    }
    map.fitBounds(map._bounds);
    //map.fitBounds(places[0].geometry.viewport);
    // map.setZoom(12);
  });
  // [END region_getplaces]
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" class="dropit" ></div>

相关文章：