html Google Maps API自动填充功能

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Google Maps API自动填充功能相关的知识，希望对你有一定的参考价值。


    <head>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
        <label for="locationTextField">Location</label>
        <input id="locationTextField" type="text" size="50">
         
        <script>
            function init() {
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById("locationTextField"));

        google.maps.event.addListener(autocomplete, 'place_changed', function () {

        var place = autocomplete.getPlace();
        var location = "Address: " + place.formatted_address + "<br/>";
   location += "Latitude: " + place.geometry.location.lat() + "<br/>";
      location += "Longitude: " + place.geometry.location.lng();
      console.log(location)
        });
            }
 
            google.maps.event.addDomListener(window, 'load', init);
        </script>
    </body>
</html>

以上是关于html Google Maps API自动填充功能的主要内容，如果未能解决你的问题，请参考以下文章

Google Places API 自动填充特定城市

如何将其他国家/地区添加到Google地图API自动填充脚本中

Google Maps API门牌号码未显示

Google Maps API 3 fitBounds 填充 - 确保标记不会被覆盖控件遮挡

Google Maps v3 API - 自动完成（地址）

Google Maps v3 API - 自动完成（地址）