javascript - 从自动完成地址输入中获取纬度和经度，并使用谷歌地图 API 显示下面的 map

Question

我有一个用于输入位置的输入字段，它支持来自谷歌地图 API 的位置建议。还有两个纬度和经度输入字段。最后有一个 div 用于在输入位置上方显示 map 。每当有人开始输入位置并从建议中选择一个位置时，该位置的 map 将自动显示在下面的 div 中。一切都应该是实时的。

到目前为止我已经写了以下内容 -

<input type="text" name="address1" id="address1" class="form-control" required="required" onkeyup="findAddress()" />
<input type="text" name="lattitude" id="cityLat" placeholder="Lattitude" class="form-control" required="required"/>
<input type="text" name="longitude" id="cityLng" placeholder="Longitude" class="form-control" required="required"/>

<div id="showMap"></div>

JavaScript 是

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
}

我已经包含了 map API

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

搜索建议有效，但休息无效。

Answer 1

不确定这是否是导致问题的原因，但您的 JavaScript 有语法错误。你有这个:

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
}

但是您没有正确关闭addListener。正确的格式应该是:

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
});
}

注意倒数第二行的 });。