geocoder.geocode() 未被执行

Question

我正在使用地理编码 API 将地址转换为经度和纬度，然后使用接收到的坐标分配一个隐藏的输入值，而不是使用此数据在地图上绘制。

我正在使用面向客户端的 javascript library，这里是我的 javascript，稍作修改。

<script>
        function initMap() {
            var geocoder = new google.maps.Geocoder();
            geocodeAddress(geocoder);
            console.log('initMap');
        }

        function geocodeAddress(geocoder, resultsMap) {
            var address = document.getElementById('address').value;
            console.log('geocodeAddresses');

            geocoder.geocode({'address': address}, function(results, status) {
                console.log('geocoder.geocode');
                if (status === google.maps.GeocoderStatus.OK) {
                    console.log('status OK');
                    document.getElementById('lnglat').value = results[0].geometry.location;
                    console.log(results[0].geometry.location);
                    } else {
                    console.log('status error');
                }
            });
        }
    </script>

当我在 firebug 中看到输出时，我可以看到 "initmap"、"geocodeAddresses"，但是在 geocoder.geocode.

中什么也看不到

我看不出任何原因，我在 firebug 中没有收到任何错误，所有必需的文件都在那里，我的 API 密钥已包含且有效。

感谢您的宝贵时间

编辑： 当我在末尾添加 console.log 时，似乎 geocoder.geocode 根本不是运行 geocodeAddress，它会完全跳过 geocoder.geocode。为什么会这样，因为 firebug.

中没有显示任何错误

Answer 1

确保您的 Google API 脚本出现在您的 javascript 之前，并且您不需要 URL

中的回调

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD77MKXXXX-T_xxxewvLrhFqn5cA0m-xxx"></script>

function geoCode(street,city,state,zip){
    var geocoder = new google.maps.Geocoder();
    var address = street + ' ' + city + ' ' + state + ' ' + zip;
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var myResult = results[0].geometry.location; // reference LatLng value
            var myArray = myResult.toString().slice(1, -1).split(', ');
            alert (parseFloat(myArray[0]) + parseFloat(myArray[1]));

        } else {
            alert('Map location not found.  Please adjust address.  Error: ', status);
        }
    });
}

Answer 2

当您提交表单时，它将重新加载页面并且永远不会调用地理编码器函数。

在 <form> 上添加 action="javascript:void(0);" 以阻止它重新加载页面，并在 <button> 上添加 onclick 事件以调用您的地理编码器功能。

Check this plunker

  <body>
    <form action="javascript:void(0);" id="search"> 
      <input name="query" type="text" required/>
      <input name="l" type="text" id="address" required/>
      <input name="lnglat" type="text" id="lnglat" />
      <button id="submit" onclick="query()" disabled="true">Submit</button>
    </form>
  </body>

geocoder.geocode() 未被执行

geocoder.geocode() not being executed

javascript

google-maps-api-3

google-geocoder

google-geocoding-api