0

（整个 jsfiddle 在这里http://jsfiddle.net/hlassiege/zbuJb/8/）

你好，

我正在使用 google maps api v3 并尝试对用户提供的地址进行地理编码。用户可以在文本字段中写下城市名称，gmap api 会自动提出一些建议：

谷歌地图自动补全

当用户选择某些内容时，我对结果进行地理编码并在另外两个文本字段上显示纬度/经度：

经纬度更新

当用户用鼠标选择城市时，这很容易。我只需要赶上事件：

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
        resetLatLon(inputLat, inputLong, input);
        return;
    }
    inputLat.value = place.geometry.location.lat();
    inputLong.value = place.geometry.location.lng();
});

如果用户输入“TAB”以移动到另一个字段，我会收听此事件并尝试手动进行地理编码：

function tryGeocoding(inputLat, inputLong, input, geocoder) {
var address = input.value;
resetLatLon(inputLat, inputLong, input);
// try to call geocoding manually
geocoder.geocode({ 'address': address}, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        // pick up the first result, maybe not accurate but better that nothing
        input.value = results[0].formatted_address;
        inputLat.value = results[0].geometry.location.lat();
        inputLong.value = results[0].geometry.location.lng();
    }
});
}

$('#location, #city').keydown(function(e) {
    // is user press TAB
    if (e.which === 9  ) {
        tryGeocoding(inputLat, inputLong, input, geocoder);
        return true;
    }
});

有用。

但是，如果用户按 ENTER，我尝试了相同的逻辑，但它不起作用：

$('#location, #city').keydown(function(e) {
    // if user press ENTER, the event is not triggered and the location is not correct
    if (e.which === 13  ) {
        tryGeocoding(inputLat, inputLong, input, geocoder);
        return true;
    }
});

编辑：这并不容易。有时，它有效，有时则无效。我真的不明白为什么当我按 ENTER 时地理编码有时会失败但随机成功

4

1 回答 1

1

按钮的默认行为submit是在您按下“回车”时将表单发送到服务器。但因为它也绑定到异步 ​​ajax 调用，所以有时您会在提交之前得到响应，有时不会，这就是为什么每次尝试都会看到不同结果的原因。

您需要使用e.preventDefault(), 来停止提交表单。

另外，我将您的事件处理程序放在一起：http: //jsfiddle.net/zbuJb/10/

于 2013-06-17T18:41:04.343 回答