使用 Google Maps API 返回用户地址的 JavaScript

Question

所以;我正在开发这个基于用户位置工作的网络应用程序。

找到坐标的部分和将这些坐标转换为地址的部分都单独工作。然而，第一个函数中的变量似乎并没有转移到第二个函数中，我不知道为什么。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

<script type="text/javascript">

var coordinates;


function getCoordinates(){

  var options = {
    enableHighAccuracy: true,
    timeout: 4500,
    maximumAge: 0
  };

  function success(pos) {
    var crd = pos.coords;

    console.log('Enlem : ' + crd.latitude);
    console.log('Boylam: ' + crd.longitude);
    console.log('Hata Payı ' + crd.accuracy + ' metre.');

    coordinates = new google.maps.LatLng(crd.latitude, crd.longitude);
    alert(coordinates);
    return coordinates;

   };

  function error(err) {
    console.warn('HATA(' + err.code + '): ' + err.message);
  };

  navigator.geolocation.getCurrentPosition(success, error, options);
 }


 var ReverseGeocode = function () {

    //This is declaring the Global variables

    var geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    function GeoCode(latlng) {

        // This is making the Geocode request
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {

            if(status !== google.maps.GeocoderStatus.OK)
            {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding    
            if (status == google.maps.GeocoderStatus.OK) {

                var address = (results[0].formatted_address);

                //This is placing the returned address in the 'Address' field on the HTML form  
                document.getElementById('Address').value = results[0].formatted_address;


            }
        });

    }

    return {

        Init: function () {

            var latlng = getCoordinates();

            alert(latlng);
            GeoCode(latlng);
        },

    };

} ();           


</script>

</head>
<body>
    <div>
        <input name="Address" type="text" id="Address" size="55" />
    </div>
    <div>
        <input type="button" value="Adres Bul" onclick="ReverseGeocode.Init()">
    </div>
    <div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
    </div>
</body>
</html>

Answer 1

您的主要问题：getCoordinates() 不返回坐标。所以你不能这样使用它：

var latlng = getCoordinates();

Javascript 有异步的东西。这意味着javascript需要一些时间来完成它。

javascript 处理此问题的方式：发送请求，然后提供回调（函数）。每当 javascript 准备好时，你的回调就会被执行。定位是那些不同步的事情之一。

这是一个简短的例子：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  <script type="text/javascript">
  // this function is triggered when geolocation has found coordinates
  function geolocationReturnedCoordinates(coordinates) {
    document.getElementById('log').innerHTML = 
      'lat: ' + coordinates.coords.latitude +
      '<br>lng: ' + coordinates.coords.longitude +
      '<br>accuracy: ' + coordinates.coords.accuracy;
    // Here would be a good place to call Reverse geocoding, since you have the coordinates here.
    GeoCode(new google.maps.LatLng(coordinates.coords.latitude, coordinates.coords.longitude));
  }

  // geocoder
  geocoder = new google.maps.Geocoder();
  function GeoCode(latlng) {
    // This is making the Geocode request
    geocoder.geocode({'location': latlng }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var address = (results[0].formatted_address);
        //This is placing the returned address in the 'Address' field on the HTML form  
        document.getElementById('Address').value = results[0].formatted_address;
      }
    });
  }

  function search_position_and_address() {
    // we start the request, to ask the position of the client
    // we will pass geolocationReturnedCoordinates as the success callback
    navigator.geolocation.getCurrentPosition(geolocationReturnedCoordinates, null, null);
  }
  </script>
</head>
<body>
  <input type="button" value="GO" onclick="search_position_and_address()"> Get position (coordinates) of the client.  -- Then look for the address
  <div id="log"></div>
  <input id="Address" placeholder="Address">
</body>
</html>

---

您可以将其放回您的结构中。 我刚刚编译了最短的代码，可以让我表达我的观点。

还有函数的名称......我试图说明一点。在现实生活中，您会选择一个较短的名称。