2017-08-10 64 views
1

我正在嘗試根據該人的位置自動更改座標。因此,我使用DarkSky的經緯度API,並試圖在Google的反向地理編碼代碼中使用這些座標,以使其返回用戶可以看到的地址。目前,用戶只能看到座標。我已經能夠成功查詢國家,但無法獲取地址。出於這個原因,我正在採取不同的方法,以便我可以找到用戶所在的國家和地址。我如何使用Google的反向地理編碼來分發地址?我提供了一個鏈接到我的codepen(其中有插件)從Google的反向地址解析中獲取地址

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

回答

1

歡迎計算器!
第一條經驗法則永遠不會發布包含您項目關鍵信息的代碼,例如上面提到的apiKey
從我的理解,似乎想從響應如下(JSON對象)通過反向地理編碼返回,提取的國家和城市是包含結果對象中address_components陣列的結構
enter image description here

要提取所需的信息我建議你迭代address_components數組並檢查types[0]。從google docs

  1. 國家表示國家政治實體,且通常 由地理編碼器所返回的訂單類型。
  2. administrative_area_level_1表示低於國家一級的一階民事實體 。通常這是狀態
  3. 地點表示一個合併的城市或城鎮政治實體。

在你的代碼中,我看到:

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

與城市和國家替換此如上所述,我認爲你是好去:)

希望這有助於!