Question

我有一个输入字段，用于输入支持谷歌地图API的位置建议的位置。纬度和经度还有两个输入字段。最后有一个div用于显示输入位置上方的地图。每当有人开始输入位置并从建议中选择一个位置然后自动，位置的地图将显示在下面的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();
}

我已经包含了地图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();
});
}

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

Answer 2

在脚本中找到这段代码：

if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
}

在此

“window.alert（”Locaton：'“+ place.geometry.location +”'“）;”

在“if”条件中添加以下行，它将提醒/通知long和lat选项/地址选择：

您的代码如下所示：

if (place.geometry.viewport) {
window.alert("Locaton: '" + place.geometry.location + "'"); //Add this line
map.fitBounds(place.geometry.viewport);
 }

从自动填充地址输入中获取Lat和Long，并使用google maps API显示下面的地图

2 个答案: