谷歌地图自动完成不改变地图位置答案

【问题标题】：Google maps autocomplete not changing map location谷歌地图自动完成不改变地图位置
【发布时间】：2015-09-16 08:10:04
【问题描述】：

您好，我正在使用 Meteor 构建一个应用程序，并且我设法让谷歌地图的自动完成功能在单独的输入字段中工作，但是当我选择一个位置时，地图不会更改为从自动完成功能中选择的位置。我正在为谷歌地图使用流星包 - dburles:google-maps。这是我的代码：

map.html

<template name="map">
  <div class="map-container">
    {{> googleMap name="locations" options=locationsOptions}}
  </div>
  <div class="container">
    <div class="search">
      <form>
        <label for="location">Location</label>
        <input id="search" type="text">
      </form>
    </div>
  </div>
</template>

map.js

// Loading map on startup
Meteor.startup(function() {
  GoogleMaps.load({ key: 'my api key', libraries: 'places' });
});

Template.map.helpers({
  locationsOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(52.524268, 13.406290),
        zoom: 12
      };
    }
  }
});

Template.map.rendered = function () {
    window.onload = function() {

        input = document.getElementById('search');
        autocomplete = new google.maps.places.Autocomplete(input);

        // When the user selects an address from the dropdown,
        google.maps.event.addListener(autocomplete, 'place_changed', function() {

             // Get the place details from the autocomplete object.
             var place = autocomplete.getPlace();

             console.log("place: " + JSON.stringify(place) );
        });
    };
};

Template.map.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('locations', function(map) {
    // Add a marker to the map once it's ready
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });
  });
});

任何想法我可以如何处理地图并将其链接到自动完成输入中的所选位置？

【问题讨论】：

标签： javascript google-maps google-maps-api-3 meteor autocomplete

【解决方案1】：

您可以查看Places Auto-complete API 中提供的此示例。您应该将您的中心设置为返回的位置。谷歌就是这样做的：

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
  map.fitBounds(place.geometry.viewport);
} else {
  map.setCenter(place.geometry.location);
  map.setZoom(17);  // Why 17? Because it looks good.
}

【讨论】：