Question

我是谷歌地图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>

Answer 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密钥，请插入您自己的API密钥以使用此示例：

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

我希望这有帮助！

如何将自动完成功能与谷歌地图相结合？

1 个答案: