通過輸入郵政編碼從谷歌地圖 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();
  }
});