从 Google 的反向地理编码中获取地址
Getting Address from Google's Reverse Geocoding
我正在尝试根据人的位置自动更改坐标。因此,我有 DarkSky 的 API 经度和纬度,并试图在 Google 的反向地理编码代码中使用这些坐标,使其 return 成为用户可以看到的地址。目前,用户只能看到坐标。我已经能够成功查询国家,但无法获取地址。为此,我采取了一种不同的方法,这样我就可以得到用户所在的国家和地址。如何使用Google的反向地理编码吐出地址?我提供了一个link 到我的代码笔(有插件)
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();
});
欢迎使用 Whosebug!
第一条经验法则永远不要 post 包含项目关键信息的代码,例如上面提到的 apiKey
。
据我了解,您似乎想从反向地理编码返回的响应(json 对象)中提取国家和城市,下面给出的是结果对象
中包含的 address_components 数组的结构
要提取所需信息,我建议您迭代 address_components 数组并检查 types[0]
。来自 google docs
- country 表示国家政治实体,通常是
Geocoder 返回的最高阶类型。
- administrative_area_level_1表示一级民事实体
低于国家水平。通常这是状态
- 地区 表示合并的城市或城镇政治实体。
在你的代码中我看到:
$("#city").text(results.results[3].address_components[4].long_name)
$("#country").text(results.results[0].address_components[3].types)
如上所述将其替换为城市和国家/地区,我认为您可以开始了:)
希望对您有所帮助!
我正在尝试根据人的位置自动更改坐标。因此,我有 DarkSky 的 API 经度和纬度,并试图在 Google 的反向地理编码代码中使用这些坐标,使其 return 成为用户可以看到的地址。目前,用户只能看到坐标。我已经能够成功查询国家,但无法获取地址。为此,我采取了一种不同的方法,这样我就可以得到用户所在的国家和地址。如何使用Google的反向地理编码吐出地址?我提供了一个link 到我的代码笔(有插件)
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();
});
欢迎使用 Whosebug!
第一条经验法则永远不要 post 包含项目关键信息的代码,例如上面提到的 apiKey
。
据我了解,您似乎想从反向地理编码返回的响应(json 对象)中提取国家和城市,下面给出的是结果对象
中包含的 address_components 数组的结构
要提取所需信息,我建议您迭代 address_components 数组并检查 types[0]
。来自 google docs
- country 表示国家政治实体,通常是 Geocoder 返回的最高阶类型。
- administrative_area_level_1表示一级民事实体 低于国家水平。通常这是状态
- 地区 表示合并的城市或城镇政治实体。
在你的代码中我看到:
$("#city").text(results.results[3].address_components[4].long_name)
$("#country").text(results.results[0].address_components[3].types)
如上所述将其替换为城市和国家/地区,我认为您可以开始了:)
希望对您有所帮助!