如何将自动完成功能与谷歌地图结合使用？答案

【问题标题】：How do i combine autocomplete with google map?如何将自动完成功能与谷歌地图结合使用？
【发布时间】：2017-10-13 11:53:38
【问题描述】：

我是 Google 地图 API 的新手，您能帮忙吗？到目前为止，我设法获得了自动完成的输入。我让地图运行起来。从这里我如何将两者结合起来，以便当我从自动完成列表中选择一个区域（输入）时，地图会转到所选区域。我找到了一种使用自动完成功能启动地图的方法。但我希望它们单独启动并使输入影响地图。这是我的代码，我从这里去哪里。

<!DOCTYPE html>
            <html>
            <body>
             <input id="pac-input" class="controls" type="text" placeholder="Enter a location"/>
             <pre id="placeInfo"></pre>
             <div id="map"></div>
            <script>
                  var map;
                  function initMap1() {
                    map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: -34.397, lng: 150.644},
                      zoom: 8
                    });
                  }

            function initMap2() {
              var input = document.getElementById('pac-input');
              var autocomplete = new google.maps.places.Autocomplete(input);
              autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                  window.alert("Autocomplete's returned place contains no geometry");
                  return;
                }

                var address = '';
                if (place.address_components) {
                  address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                  ].join(' ');
                }

                document.getElementById('placeInfo').innerHTML = '<div><strong>' + place.name + '</strong><br>' + address;    
              });
            }
            </script>
             <script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&libraries=places&callback=initMap2"
             async defer></script>
             <script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&callback=initMap1"
             async defer></script>
            </body>
            </html>

【问题讨论】：

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

标签： javascript jquery google-maps autocomplete google-api

【解决方案1】：

正如一条评论中提到的，您遇到问题的部分原因是您将地图包含了两次。您只需要一个脚本标签来加载地图。这是您应该使用的：

<script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&libraries=places&callback=initMap2"
         async defer></script>

另外，您没有任何 CSS，因此包含地图的 div 可能无法很好地显示。我建议将以下 CSS 添加到您的代码中：

#map {
 height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

我还注意到，对于引导 JS API 的每个脚本标记，您都有不同的回调函数。由于您只需要其中一个脚本标签，因此我建议将两个回调函数合二为一。

您提到您希望自动完成的输入影响地图。您可以通过在自动完成动作侦听器函数中更改地图对象来做到这一点：

map.setCenter(place.geometry.location);

我制作了一个 JSBin 来为您演示这一点。我将 HTML 与 JavaScript 代码分开，并添加了我建议的 CSS。 JSBin 看起来运行良好。为了安全起见，我已从 JSBin 中删除了我的 API 密钥，请插入您自己的以使用此示例：

http://jsbin.com/xilepukure/1/edit?html,css,js,output

我希望这会有所帮助！

【讨论】：