Google Maps批量反向地理编码Javascript

Question

So I know that Google API v3 prevents batch requests unless there is a 2 second delay - So I'm just trying to do a simple reverse Geocode using one request. 因此，我知道Google API v3会阻止批量请求，除非有2秒的延迟-因此，我只是尝试使用一个请求来做一个简单的反向地址解析。

You can see my array now only has one object (for now). 您可以看到我的数组现在只有一个对象（目前）。

The problem is that I'm returning an "undefined" value under the function "showAddress()". 问题是我正在函数“ showAddress（）”下返回“未定义”值。 What's weird is that the address shows just fine on the google maps marker - but it won't let me return the value properly. 奇怪的是，该地址在google maps标记上显示得很好-但它不能让我正确返回该值。

Please ignore the fact I'm using extra functions when I don't need to - I will need these functions later for my full setup. 请忽略我不需要时使用其他功能的事实-稍后将需要这些功能来进行完整设置。

Here's a JSBin --> http://jsbin.com/japudabu/1/edit?html,output 这是一个JSBin-> http://jsbin.com/japudabu/1/edit?html，输出

I think the problem is more here: 我认为问题更多在这里：

....

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

...

Here's the full setup: 这是完整的设置：

Javascript: 使用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: 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>

Answer 1

There I fixed it for you: 在那里，我为您修复了该问题：

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

Your problem was that codeLatLng(lat, lng) does some asynchronous processing. 您的问题是codeLatLng（lat，lng）进行了一些异步处理。 So you cannot just say return from within that process. 因此，您不能只说在该过程中获得回报。 That's why your function always returned undefined. 这就是为什么您的函数总是返回未定义的原因。

The right way to do it is add a call back to the codeLatLng(lat, lng) like this: 正确的方法是像这样将调用添加回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);
          }
        });
      }

and once google finds the address fire your call back. google找到地址后，便会回电给您。 You will have to modify your showAddress() like this: 您将必须像这样修改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;
            });
        }

      }

Notice how I am passing a function to codeLatLng . 注意我如何将一个函数传递给codeLatLng 。 Hope that helps you understand. 希望对您有所帮助。 Please ask if you dont. 请问您是否不。 Check the new JS Bin i have posted above to see it running. 检查我上面发布的新JS Bin，以查看其运行情况。

Google Maps批量反向地理编码Javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-04 19:59:38

Google Maps批量反向地理编码Javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-04 19:59:38

解决方案1
1 已采纳 2014-04-04 19:59:38