Question

我有这个代码，我尝试从谷歌地图中的coords获取地址，但我的手机返回状态错误zero_results。我确信我的位置是可用的，因为如果我通过浏览器测试并返回我的坐标地址位置。

有什么想法吗？

<!DOCTYPE html>

<html>

<head>

    <title>Geolocation test</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        div#mapdiv {
            width: 500px;
            height: 300px;
            margin: 10px auto;
        }
    </style>
</head>
<body onload="">
    <div id="mapdiv"></div>

    <div id="msg"></div>
    <div id="msg2"></div>
    <script type="text/javascript">

        function initMap() {
            var pos2;

            var map = new google.maps.Map(document.getElementById('mapdiv'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 12
            });
            var infoWindow = new google.maps.InfoWindow({map: map});

            var latLng;
            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    pos2 = pos;
                    latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    infoWindow.setPosition(pos);
                    infoWindow.setContent('La tua posizione.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

            var geocoder = new google.maps.Geocoder;


            geocoder.geocode({'latLng': pos2}, function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        map.setZoom(11);
                        var marker = new google.maps.Marker({
                            position: pos2,
                            map: map
                        });
                        document.getElementById('msg').innerHTML = results[0].formatted_address;

                    } else {

                        document.getElementById('msg').innerHTML = 'results[1].formatted_address';
                        window.alert('No results found');
                    }
                } else {
                    document.getElementById('msg2').innerHTML = JSON.stringify(pos2);
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
        }

    </script>

    <script async defer
    src="http://maps.google.com/maps/api/js?key=API_KEY&callback=initMap"></script>

</body>
</html>

`

Answer 1

地理定位服务是异步的，您需要在回调函数中使用数据（pos2）。目前，您在设置该值之前调用地理编码器。

proof of concept fiddle

// Try HTML5 geolocation.
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    pos2 = pos;
    latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(pos);
    infoWindow.setPosition(pos);
    infoWindow.setContent('La tua posizione.');

    // call reverse geocoder with location returned by geolocation service
    var geocoder = new google.maps.Geocoder;
    geocoder.geocode({
      'latLng': pos2
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          map.setZoom(11);
          var marker = new google.maps.Marker({
            position: pos2,
            map: map
          });
        infoWindow.setContent('La tua posizione.<br>'+ results[0].formatted_address);
        } else {
          document.getElementById('msg').innerHTML = 'results[1].formatted_address';
          window.alert('No results found');
        }
      } else {
        document.getElementById('msg2').innerHTML = JSON.stringify(pos2);
        window.alert('Geocoder failed due to: ' + status);
      }
    });
    map.setCenter(pos);
  }, function() {
    handleLocationError(true, infoWindow, map.getCenter());
  });

代码段

div#mapdiv {
  width: 500px;
  height: 300px;
  margin: 10px auto;
}

<div id="mapdiv"></div>
<div id="msg"></div>
<div id="msg2"></div>
<script type="text/javascript">
  function initMap() {
    var pos2;
    var map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 12
    });
    var infoWindow = new google.maps.InfoWindow({
      map: map
    });
    var latLng;
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        pos2 = pos;
        latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(pos);
        infoWindow.setPosition(pos);
        infoWindow.setContent('La tua posizione.');
        var geocoder = new google.maps.Geocoder;
        geocoder.geocode({
          'latLng': pos2
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
              map.setZoom(11);
              var marker = new google.maps.Marker({
                position: pos2,
                map: map
              });
            infoWindow.setContent('La tua posizione.<br>'+ results[0].formatted_address);
            } else {
              document.getElementById('msg').innerHTML = 'results[1].formatted_address';
              window.alert('No results found');
            }
          } else {
            document.getElementById('msg2').innerHTML = JSON.stringify(pos2);
            window.alert('Geocoder failed due to: ' + status);
          }
        });
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
      'Error: The Geolocation service failed.' :
      'Error: Your browser doesn\'t support geolocation.');
  }

</script>
<script async defer src="https://maps.google.com/maps/api/js?callback=initMap"></script>

Google地图反向地理编码返回zero_results

1 个答案: