Google Maps批量反向地理編碼Javascript

Question

因此，我知道Google API v3會阻止批量請求，除非有2秒的延遲-因此，我只是嘗試使用一個請求來做一個簡單的反向地址解析。

您可以看到我的數組現在只有一個對象（目前）。

問題是我正在函數“ showAddress（）”下返回“未定義”值。 奇怪的是，該地址在google maps標記上顯示得很好-但它不能讓我正確返回該值。

請忽略我不需要時使用其他功能的事實-稍后將需要這些功能來進行完整設置。

這是一個JSBin-> http://jsbin.com/japudabu/1/edit?html，輸出

我認為問題更多在這里：

....

  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>

Answer 1

在那里，我為您修復了該問題：

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);
          }
        });
      }

google找到地址后，便會回電給您。 您將必須像這樣修改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，以查看其運行情況。

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