如何在我的地理位置 HTML 表单中添加自动填充？

Question

I want to add autofill in my button so as soon as the user starts writing the name of the location, it should suggest the name using google library.我想在我的按钮中添加自动填充功能，以便用户开始编写位置名称时，它应该使用谷歌库建议名称。 Currently I am taking the full input from user and hitting a button to show the longitude and latitude which is not accurate if the name of location is long.目前我正在接受用户的完整输入并点击一个按钮来显示经度和纬度，如果位置名称很长，这将是不准确的。

</head>
<!-- To use Geocoding from Google Maps V3 you need to link https://maps.googleapis.com/maps/api/js?sensor=false -->
<body>
<div>
     <h3> Enter an adress and press the button</h3>

    <input id="address"  type="text" placeholder="Enter address here" />
    <button id="btn">Get LatLong</button>
    <div>
        <p>Latitude:
            <input type="text" id="latitude" readonly />
        </p>
        <p>Longitude:
            <input type="text" id="longitude" readonly />
        </p>
    </div>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    /* This showResult function is used as the callback function*/

function showResult(result) {
    document.getElementById('latitude').value = result.geometry.location.lat();
    document.getElementById('longitude').value = result.geometry.location.lng();
}

function getLatitudeLongitude(callback, address) {
    // If adress is not supplied, use default value 'Ferrol, Galicia, Spain'
    address = address || 'Ferrol, Galicia, Spain';
    // Initialize the Geocoder
    geocoder = new google.maps.Geocoder();
    if (geocoder) {
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback(results[0]);
            }
        });
    }
}

var button = document.getElementById('btn');

button.addEventListener("click", function () {
    var address = document.getElementById('address').value;
    getLatitudeLongitude(showResult, address)
});
var addressbutton = document.getElementById('address');

addressbutton.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) { 
        var address = document.getElementById('address').value;
    getLatitudeLongitude(showResult, address)
    }
});
</script>
</body>
</html>

Answer 1

Google Maps API has an autocomplete method new google.maps.places.Autocomplete(input); Google Maps API 有一个自动完成方法new google.maps.places.Autocomplete(input); . . The method will do all the hard work for you, it will display results depending on the location entered.该方法将为您完成所有繁重的工作，它将根据输入的位置显示结果。

You should get the input by using document.getElementById('latitude') .您应该使用document.getElementById('latitude')获取输入。

In your situation it should look like this:在您的情况下，它应该如下所示：

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

Google provide some example code谷歌提供了一些示例代码

The documentation for the autocomplete class 自动完成类的文档

如何在我的地理位置 HTML 表单中添加自动填充？

问题描述

1 个解决方案

解决方案1
1 2018-02-08 14:15:49

如何在我的地理位置 HTML 表单中添加自动填充？

问题描述

1 个解决方案

解决方案1 1 2018-02-08 14:15:49

解决方案1
1 2018-02-08 14:15:49