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>