javascript - 在 searchBox.addListener 调用新地点后，谷歌地图中的搜索城市不会更改地点

Question

我正在努力为谷歌地图实现一个新的搜索框。我点击了这个链接https://developers.google.com/maps/documentation/javascript/examples/places-searchbox ，并且它工作正常，直到它自动完成放置在自动显示建议的列表中。而且效果很好。问题是，例如，当我单击一个城市时， map 不会更改为新地点。我的意思是什么也没发生。

这是我的标题

<script src="https://maps.googleapis.com/maps/api/js?key=...&libraries=places"></script>

<script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', initialize);
</script>

这里是 html

<div id="map-container2" class="">
 <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
 <div id="map"></div>
</div>

这是我的java脚本函数，我知道我的问题与searchBox.addListener有关，我尝试了很多代码，即使是链接中的代码，也没有一个起作用。

function initialize() {

    centerLocation();
}

function centerLocation() {
    var zoom = 6;
    var position = {
        coords: {
            latitude: 77.040,
            longitude: 2.908
        }
    };

    var map = new google.maps.Map(document.getElementById('map'), {

    });


    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');

    var searchBox = new google.maps.places.SearchBox(input);

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);




    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
    });




    searchBox.addListener('places_changed', function () {

        var places = searchBox.getPlaces();
        console.log(places);
        alert(places);

        if (places.length == 0) {
            return;
        }





    });

    markers(position, zoom);
}

这条线在控制台中工作并正确显示位置console.log(place);我也有这个JavaScript函数来制作它与名为kine的数组一起使用的标记 但我在这里添加了您可能需要更好地了解结构

function markers(position, zoom) {


    if (typeof zoom === "undefined") {
        zoom = 12;
    }

    var w = window.innerWidth;
    if (w < 992) {

        zoom = 5;
    }
    var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: zoom,
        scrollwheel: false,
        center: center,

        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var flag;
    var group = [];
    for (var i = 0; i < data.kines.length; i++) {
        flag = data.kines[i].group;
        var lat = data.kines[i].lat;
        var lon = data.kines[i].lon;

        var latLng = new google.maps.LatLng(lat, lon);

        if(flag > 1) {
            group.push(data.kines[i]);
        } else {
            group.push(data.kines[i]);
            var marker = new google.maps.Marker({
                position: latLng,
                icon: "pointer.png"
            });
            var fn = markerClickFunction(group, latLng, map);
            google.maps.event.addListener(marker, 'click', fn);
            markers.push(marker);
            group = [];
        }
    }
    var markerCluster = new MarkerClusterer(map, markers);


}

Answer 1

您删除了调整 map 以显示返回结果的代码。如果您只期望得到一个结果(例如搜索“纽约，纽约，美国”)，则可以这样做:

searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();
  console.log(places);
  if (places.length == 1) {
    var place = places[0];
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
    }
  }
});

如果您期望获得多个结果(例如在纽约市搜索“星巴克”)，则还需要处理多个结果的情况。这是在 google example 中处理的.

proof of concept fiddle

代码片段:

function centerLocation() {
  var zoom = 6;
  var position = {
    coords: {
      latitude: 77.040,
      longitude: 2.908
    }
  };
  var map = new google.maps.Map(document.getElementById('map'), {});
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    console.log(places);
    if (places.length == 1) {
      var place = places[0];
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
      }
    } else {
      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
        map.fitBounds(bounds);
      });
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
  centerLocation();
}

html,
body,
#map-container2,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&"></script>
<div id="map-container2" class="">
  <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
  <div id="map"></div>
</div>