Question

我已经使Google自动完成工作，但是以防万一用户没有选择自动完成功能，我试图将地址提交给Google并自己检索纬度和经度。我遇到的问题是在不使用自动完成功能的情况下提交时

TypeError：

无法读取未定义和未捕获的属性“几何”   TypeError：无法读取未定义的属性“位置”（我没有   console.logs被触发）。

如果我使用自动完成功能提交，仍然会被发现

TypeError：无法读取未定义的属性“几何”

即使自动完成功能确实可以获取经纬度较长的地址。

我的HTML

<form method="GET" id="my-form" action="/search" onsubmit="check()">
<input class="form-control" id="getaddy" type="text" placeholder="Search..." name="term" onFocus="geo()">
<input id="latitude" type="hidden" name="latitude">
<input id="longitude" type="hidden" name="longitude">
</form>

我称geo()为自动补全，但是如果他们不使用自动补全，我会尝试使用check（）函数在提交时捕获它。这是我的JS

function check() {
let latitude = document.getElementById("latitude").value;
if (latitude) {
     console.log(latitude);
  } else {

let term = $("#getaddy").val();

$.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address="+encodeURIComponent(term) +"&key=GOOGLEKEY",
    type: 'get',
    success: function(data) {
        if (data.status === 'OK') {
            // Get the lat/lng from the response
            let lat = data.results[0].geometry.location.lat;
            let lng = data.results[0].geometry.location.lng;

            console.log("pass");

        }
    },
    error: function(msg) {
        console.log("fail");
    }
});
    return true;
}
}


function geo() {

  autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('getaddy')), {
      types: ['geocode']
    });
  autocomplete.addListener('place_changed', addlatlong);
}
function addlatlong() {

var place = autocomplete.getPlace();

var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();

document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}

非常感谢您的帮助！

Answer 1

如果您已经具有两个属性值latitude和longitude，建议您使用此代码（由Google提供）获取地址（不使用jquery ajax ）：

var geocoder = new google.maps.Geocoder;
var latlng = { lat: latitude, lng: longitude };

geocoder.geocode({ 'location': latlng }, function (results, status) {
    if (status === 'OK') {
        if (results[0]) {
            var address = results[0].formatted_address);
            console.log(address);
        } else {
            console.log('No results found');
        }
    } else {
        console.log('Geocoder failed due to: ' + status);
    }
});

来源：Reverse Geocoding (Address Lookup)

如果他们没有提交请求，则可以尝试使用jquery来在searchBox失去焦点（focusout）时触发事件，然后调用事件places_changed来获取latitude和longitude。

来源：Places Search Box

来源：Trigger places_changed in Google maps from submit button

未捕获的TypeError：无法读取未定义的属性“几何”

1 个答案: