Question

我正在尝试根据人的位置自动更改坐标。因此，我有经典和纬度的DarkSky API，并尝试在Google的反向地理编码代码中使用这些坐标，让它返回用户可以看到的地址。此刻，用户只能看到坐标。我已经能够成功查询该国家，但无法获得该地址。出于这个原因，我采取了不同的方法，以便我可以获得用户所在的国家/地址。我如何使用Google的反向地理编码来吐出地址？我提供了一个指向我的codepen的链接（有插件）

https://codepen.io/baquino1994/pen/ayJOod?editors=1010

HTML

<head>
  <meta charset ="utf-8" />
  <meta name = "viewport" content ="width=device-width, intitial-scale = 1"/>
  <link rel = "stylesheet" href ="style.css"/>
  <link rel = "http://ipinfo.io"/>
  <title>Weather</title>
  <link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
  <script src = https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>
</head>



<body>
 <header>
   <h1><div id="minutely"></div></h1>
 <h2><div id="location"></div></h2>
 </header>
  <p><span id="city"</span></p>


  <p> <span id="country"></span></p>
  <div id="temp" id="tempunit"></div>
  <button class="btn btn-primary" id="BT1">Change Metric</button>

</body>

JS

function weather(){
    function success(position){
        var latitude = position.coords.latitude;
    var longitude= position.coords.longitude;
        // location.innerHTML = "Latitude:" + latitude+"°"+ "Longitude: " + longitude+'°';
        var theUrl = url +apiKey + "/"+ latitude+","+ longitude +"?callback=?";

    $.getJSON(theUrl, function(data){
        $("#temp").html(data.currently.temperature)
 $("#minutely").html(data.minutely.summary)


  $.ajax({
      url:'https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=AIzaSyBpiTf5uzEtJsKXReoOKXYw4RO0ayT2Opc', dataType: 'json',
     success: function(results){
         $("#city").text(results.results[3].address_components[4].long_name)   
  $("#country").text(results.results[0].address_components[3].types)

     }


 }




    )}
             );


  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}




  } 


var location = document.getElementById("location");
var apiKey = "3827754c14ed9dd9c84afdc4fc05a1b3";
var url = "https://api.darksky.net/forecast/";
navigator.geolocation.getCurrentPosition(success);
// location.innerHTML = "Locating...";

   }
$(document).ready(function(){ 
weather();
 });

Answer 1

欢迎来到stackoverflow！
第一条经验法则从不发布包含项目关键信息的代码，例如上面提到的apiKey 根据我的理解，你似乎想要从反向地理编码返回的响应（json对象）中提取国家和城市，下面给出的是结果对象中包含的address_components数组的结构

要提取所需信息，我建议您迭代address_components数组并检查types[0]。来自google docs

国家/地区表示国家政治实体，通常是 Geocoder返回的最高订单类型。
administrative_area_level_1 表示一级民事实体低于国家一级。通常这是州
地区表示合并后的城市或城镇政治实体。

在你的代码中我看到：

$("#city").text(results.results[3].address_components[4].long_name)   
$("#country").text(results.results[0].address_components[3].types)

如上所述，将其替换为城市和国家，我认为你很高兴：）

希望这有帮助！

通过Google的反向地理编码获取地址

1 个答案: