Question

我在一个地方搜索标记，并在谷歌地图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还显示了一组标记，我无法删除它们。我删除了最初来自searchbox的标记...但我需要place_Id，所以我将它保留在getDetails上使用。

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

编辑2：

感谢geocodezip。请使用他创建的小提琴进行调试...仍然无法使其正常工作。 http://jsfiddle.net/dw7moor5/

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

Answer 1

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

＆＃13;

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);

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<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>

＆＃13;

getDetails但无法删除

1 个答案: