通过输入邮政编码从谷歌地图 API 获取经度和纬度

Question

我需要在不提交表单的情况下输入邮政编码后立即从谷歌地图 API 获取隐藏文本字段的经度和纬度。 也许在更改事件上使用 javascript

HTML

脚本

`

                    <form id="form1" runat="server">
                    <div>
                        <table>
                            <tr>
                                <td>
                                    <input name="txtPostalCode" type="text" value=""  id="txtPostalCode" />
                                </td>
                  
                            </tr>
                            <tr>
                                <td>
                                    <input name="txtLatitude" type="hidden" id="txtLatitude" />
                                </td>
                                <td>
                                    <input name="txtLongitude" type="hidden" id="txtLongitude" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    </form>

`

`

                function GetLocation() {
                    var geocoder = new google.maps.Geocoder();
                    var address = document.getElementById("txtPostalCode").value;
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var latitude = results[0].geometry.location.lat();
                            var longitude = results[0].geometry.location.lng();
                            document.getElementById("txtLatitude").value = latitude;
                            document.getElementById("txtLongitude").value = longitude;
                        } else {
                            alert("Request failed.")
                        }
                    });
                };

`

Answer 1

向您的邮政编码输入添加一个事件侦听器，一旦文本的长度为 5，就调用您的函数。

是这样的：

var zipInput = document.getElementById('txtPostalCode');
zipInput.addEventListener('input', function(e) {
  if (e.target.value.length === 5) {
    GetLocation();
  }
});