我如何将自动填充与谷歌地图结合？

-1

我是Google Maps 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>

来源

2017-05-14 Same

'您已在此页面上多次包含Google Maps API。这可能会导致意外的错误 – geocodezip

正如在一个评论中提到的那样，为什么你有问题的部分原因是你包括两次地图。你只需要一个脚本标签来加载地图。这是你应该使用的一个：

<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; 
}

我也注意到，你必须为在那里你bootsrap的JS API每个脚本标记不同的回调函数。由于您只需要其中一个脚本标记，因此我建议将这两个回调函数合并为一个。

您提到您希望自动完成的输入影响地图。你可以通过改变你的自动完成功能ActionListener的地图对象做到这一点：

map.setCenter(place.geometry.location);

我已经做了JSBin来证明这一点给你。我将HTML代码与JavaScript代码分开，并添加了我建议的CSS。 JSBin看起来效果很好。为了安全我已删除从JSBin我的API密钥，请插入自己使用此示例：

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

我希望这有助于！

来源

2017-05-16 19:57:55

我如何将自动填充与谷歌地图结合？

回答

相关问题