谷歌地图批量反向地理编码Javascript

Google Maps batch reverse Geocoding Javascript

本文关键字：编码 Javascript 谷歌地图      更新时间：2023-09-26

所以我知道 Google API v3 会阻止批处理请求，除非有 2 秒的延迟 - 所以我只是尝试使用一个请求进行简单的反向地理编码。

你可以看到我的数组现在只有一个对象（目前）。

问题是我在函数"showAddress（）"下返回一个"未定义"的值。奇怪的是，地址在谷歌地图标记上显示得很好 - 但它不会让我正确返回值。

请忽略我在不需要时使用额外功能的事实 - 我稍后将需要这些功能进行完整设置。

这是一个JSBin --> http://jsbin.com/japudabu/1/edit?html,output

我认为问题更多在这里：

....
  infowindow.setContent(results[0].formatted_address);
  infowindow.open(map, marker);
  return results[0].formatted_address;
...

以下是完整设置：

Javascript：

var geoArray = [
    {lat: 29.546604, lng: -98.407082}/*,
    {lat: 29.402672, lng: -98.392095},
    {lat: 29.769542, lng: -98.664527},
    {lat: 29.778432, lng: -98.464939},
    {lat: 29.78322, lng: -98.523551},
    {lat: 29.424455, lng: -98.403565},
    {lat: 29.342814, lng: -98.541336},
    {lat: 29.291922, lng: -98.434656},
    {lat: 29.354486, lng: -98.400621},
    {lat: 29.512927, lng: -98.439247},
    {lat: 29.386556, lng: -98.510591},
    {lat: 29.365009, lng: -98.427818},
    {lat: 29.363518, lng: -98.583277},
    {lat: 29.305123, lng: -98.429247},
    {lat: 29.673901, lng: -98.39694},
    {lat: 29.530874, lng: -98.446433}
    {lat: 29.374788, lng: -98.602789} */];
 var geocoder;
  var map;
  var infowindow = new google.maps.InfoWindow();
  var marker;
    function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(29.4814305,-98.5144044);
    var mapOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: 'roadmap'
    }
   // alert(mapOptions);
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  }


  function codeLatLng(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
          return results[0].formatted_address;
        } else {
          alert('No results found');
        }
      } else {
        alert('Geocoder failed due to: ' + status);
      }
    });
  }
  function showAddress() {
    for (var i = 0; i < geoArray.length; i++) {
        var x = 29.546604;
        var y = -98.407082;
        var myval = "address is: " + codeLatLng(x,y) + "<br/>";
        var thediv = document.getElementById('listme');
        thediv.innerHTML = thediv.innerHTML + myval;
    }
  }

.HTML：

<!DOCTYPE html>    
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
<body onload='initialize();'>
  <div>
    <input type="button" value="Reverse Geocode" onclick="showAddress()">
  </div>
   <div id="map_canvas" style="height: 80%; width:50%; border: 1px solid black;"></div>
   <div id='listme' style='position:fixed;bottom:10;left:10;'></div>
</body>
</html>

在那里我为您修复了它：

http://jsbin.com/japudabu/4/

你的问题是codeLatLng（lat，lng）做一些异步处理。所以你不能只说从这个过程中返回。这就是为什么你的函数总是返回未定义。

正确的方法是像这样向codeLatLng(lat, lng)添加一个回调：

function codeLatLng(lat, lng, callback) {  ///<<-------CHANGE HERE
        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              map.setZoom(11);
              marker = new google.maps.Marker({
                  position: latlng,
                  map: map
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
              callback(results[0].formatted_address);   ///<<-------CHANGE HERE
              //return results[0].formatted_address;   ///<<------- CAN'T DO THIS..
            } else {
              alert('No results found');
            }
          } else {
            alert('Geocoder failed due to: ' + status);
          }
        });
      }

一旦谷歌找到该地址，就会触发您的回电。你必须像这样修改你的 showAddress（）：

function showAddress() {
        for (var i = 0; i < geoArray.length; i++) {
            var x = 29.546604;
            var y = -98.407082;
            codeLatLng(x,y,function(address){   ///<<-------CHANGE HERE
              var myval = "address is: " + address + "<br/>";
              var thediv = document.getElementById('listme');
              thediv.innerHTML = thediv.innerHTML + myval;
            });
        }
      }

请注意我如何将函数传递给codeLatLng。希望能帮助您理解。如果您不这样做，请询问。检查我在上面发布的新 JS Bin 以查看它正在运行。

相关文章：