使用地理定位获取城市名称

我利用基于 HTML 的地理定位系统得到了用户的经纬度。

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get latitude and longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
}

我想显示的城市名称，似乎得到它的唯一途径是使用反向地理定位 API。我阅读了谷歌反向地理定位的文档，但我不知道如何在我的网站上获得输出。

我不知道如何使用这个: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"在页面上显示城市名称。

我怎么才能做到呢？

387530 次浏览
小开
最佳答案

您可以使用 GoogleAPI 做类似的事情。

请注意，你必须包括谷歌地图库为此工作。谷歌地理编码器返回很多地址组件，所以你必须做出一个有根据的猜测，哪一个将拥有城市。

通常你要找的是“ Administration _ area _ level _ 1” ，但有时候地方性就是你要找的城市。

无论如何-更多关于谷歌响应类型的细节可以找到 给你和 给你。

下面的代码应该可以解决这个问题:

<!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"/>
<title>Reverse Geocoding</title>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;


if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}


function errorFunction(){
alert("Geocoder failed");
}


function initialize() {
geocoder = new google.maps.Geocoder();






}


function codeLatLng(lat, lng) {


var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {


//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)




} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">


</body>
</html>
小开

另一种方法是使用我的服务 http://ipinfo.io，它根据用户当前的 IP 地址返回城市、地区和国家名称。这里有一个简单的例子:

$.get("http://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");

下面是一个更详细的 JSFiddle 示例，它还打印出完整的响应信息，因此您可以看到所有可用的详细信息: http://jsfiddle.net/zK5FN/2/

小开

这里是为我更新的工作版本，将获得城市/城镇，它看起来像一些字段被修改在 json 响应。引用此问题以前的答案。(感谢 Michal 和另一个参考: 林克

var geocoder;


if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng);
}


function errorFunction() {
alert("Geocoder failed");
}


function initialize() {
geocoder = new google.maps.Geocoder();


}


function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({latLng: latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var arrAddress = results;
console.log(results);
$.each(arrAddress, function(i, address_component) {
if (address_component.types[0] == "locality") {
console.log("City: " + address_component.address_components[0].long_name);
itemLocality = address_component.address_components[0].long_name;
}
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
小开 

$.ajax({
url: "https://geolocation-db.com/jsonp",
jsonpCallback: "callback",
dataType: "jsonp",
success: function(location) {
$('#country').html(location.country_name);
$('#state').html(location.state);
$('#city').html(location.city);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#ip').html(location.IPv4);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div>Country: <span id="country"></span></div>
<div>State: <span id="state"></span></div>
<div>City: <span id="city"></span></div>
<div>Latitude: <span id="latitude"></span></div>
<div>Longitude: <span id="longitude"></span></div>
<div>IP: <span id="ip"></span></div>

使用 html5地理定位需要用户权限。如果您不想这样做，可以使用外部定位器，比如支持 https://geolocation-db.com IPv6。不允许限制和无限制的请求。

例子

对于一个纯粹的 javascript 示例，如果不使用 jQuery，请查看 这个 answer。

小开

您可以使用 GoogleMaps 地理编码 API 获得城市名称、国家名称、街道名称和其他地理数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);


function success(position) {
console.log(position.coords.latitude)
console.log(position.coords.longitude)


var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';


$.getJSON(GEOCODING).done(function(location) {
console.log(location)
})


}


function error(err) {
console.log(err)
}
</script>
</body>
</html>

并使用 jQuery 在页面上显示这些数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>


<p>Country: <span id="country"></span></p>
<p>State: <span id="state"></span></p>
<p>City: <span id="city"></span></p>
<p>Address: <span id="address"></span></p>


<p>Latitude: <span id="latitude"></span></p>
<p>Longitude: <span id="longitude"></span></p>


<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);


function success(position) {


var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';


$.getJSON(GEOCODING).done(function(location) {
$('#country').html(location.results[0].address_components[5].long_name);
$('#state').html(location.results[0].address_components[4].long_name);
$('#city').html(location.results[0].address_components[2].long_name);
$('#address').html(location.results[0].formatted_address);
$('#latitude').html(position.coords.latitude);
$('#longitude').html(position.coords.longitude);
})


}


function error(err) {
console.log(err)
}
</script>
</body>
</html>
小开

在搜索和拼凑了一些不同的解决方案和我自己的东西之后，我想出了这个函数:

function parse_place(place)
{
var location = [];


for (var ac = 0; ac < place.address_components.length; ac++)
{
var component = place.address_components[ac];


switch(component.types[0])
{
case 'locality':
location['city'] = component.long_name;
break;
case 'administrative_area_level_1':
location['state'] = component.long_name;
break;
case 'country':
location['country'] = component.long_name;
break;
}
};


return location;
}
小开

Geolocator.js 可以做到这一点(我是作者)。

获取城市名称(有限地址)

geolocator.locateByIP(options, function (err, location) {
console.log(location.address.city);
});

获取完整地址信息

下面的示例将首先尝试 HTML5 Geolocation API 来获得确切的坐标。如果失败或被拒绝，它将回退到 Geo-IP 查找。一旦它得到了坐标，它会反向地理编码坐标到一个地址。

var options = {
enableHighAccuracy: true,
fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
addressLookup: true
};
geolocator.locate(options, function (err, location) {
console.log(location.address.city);
});

这在内部使用 GoogleAPI (用于地址查找)。因此，在这个调用之前，您应该使用 GoogleAPI 密钥配置地理定位器。

geolocator.config({
language: "en",
google: {
version: "3",
key: "YOUR-GOOGLE-API-KEY"
}
});

Geolocator 支持地理定位(通过 HTML5或 IP 查找)、地理编码、地址查找(反座标化)、距离和持续时间、时区信息和更多功能... ..。

小开

这是另一个尝试。.为公认的答案添加更多内容，可能会更全面。.当然开关盒会让它看起来很优雅。

function parseGeoLocationResults(result) {
const parsedResult = {}
const {address_components} = result;


for (var i = 0; i < address_components.length; i++) {
for (var b = 0; b < address_components[i].types.length; b++) {
if (address_components[i].types[b] == "street_number") {
//this is the object you are looking for
parsedResult.street_number = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "route") {
//this is the object you are looking for
parsedResult.street_name = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_1") {
//this is the object you are looking for
parsedResult.sublocality_level_1 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_2") {
//this is the object you are looking for
parsedResult.sublocality_level_2 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_3") {
//this is the object you are looking for
parsedResult.sublocality_level_3 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "neighborhood") {
//this is the object you are looking for
parsedResult.neighborhood = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "locality") {
//this is the object you are looking for
parsedResult.city = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
parsedResult.state = address_components[i].long_name;
break;
}


else if (address_components[i].types[b] == "postal_code") {
//this is the object you are looking for
parsedResult.zip = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "country") {
//this is the object you are looking for
parsedResult.country = address_components[i].long_name;
break;
}
}
}
return parsedResult;
}
小开

可以使用 https://ip-api.io/获取城市名称，它支持 IPv6。

作为一个额外的好处，它允许检查 ip 地址是否是一个 tor 节点，公共代理或垃圾邮件发送者。

Javascript 代码:

$(document).ready(function () {
$('#btnGetIpDetail').click(function () {
if ($('#txtIP').val() == '') {
alert('IP address is reqired');
return false;
}
$.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
function (result) {
alert('City Name: ' + result.city)
console.log(result);
});
});
});

HTML 代码

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
<input type="text" id="txtIP" />
<button id="btnGetIpDetail">Get Location of IP</button>
</div>

JSON 输出

{
"ip": "64.30.228.118",
"country_code": "US",
"country_name": "United States",
"region_code": "FL",
"region_name": "Florida",
"city": "Fort Lauderdale",
"zip_code": "33309",
"time_zone": "America/New_York",
"latitude": 26.1882,
"longitude": -80.1711,
"metro_code": 528,
"suspicious_factors": {
"is_proxy": false,
"is_tor_node": false,
"is_spam": false,
"is_suspicious": false
}
}
小开

正如@PirateApp 在他的评论中提到的，它明确反对谷歌地图 API 授权使用地图 API。

您有很多选择，包括下载 Geoip 数据库并在本地查询它，或者使用第三方 API 服务，如我的服务 Ipdata.co。

Ipdata 提供来自任何 IPv4或 IPv6地址的地理位置、组织、货币、时区、呼叫代码、标志和 Tor 退出节点状态数据。

并且具有可伸缩性，每个全局端点能够处理每秒 > 10,000个请求！

这个答案使用了一个“ test”API Key，它非常有限，只能用于测试几个调用。注册您自己的免费 API 密钥，并获得多达1500个开发请求每天。

$.get("https://api.ipdata.co?api-key=test", function(response) {
$("#ip").html("IP: " + response.ip);
$("#city").html(response.city + ", " + response.region);
$("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1>


<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>

小提琴

小开

这里有一个简单的函数，你可以用来得到它。我使用 公理发出 API 请求，但是您可以使用其他任何东西。

async function getCountry(lat, long) {
const { data: { results } } = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${GOOGLE_API_KEY}`);
const { address_components } = results[0];


for (let i = 0; i < address_components.length; i++) {
const { types, long_name } = address_components[i];


if (types.indexOf("country") !== -1) return long_name;
}
}
小开

或者你可以使用我的服务 https://astroip.co，它是一个新的地理定位 API:

$.get("https://api.astroip.co/?api_key=1725e47c-1486-4369-aaff-463cc9764026", function(response) {
console.log(response.geo.city, response.geo.country);
});

AstroIP 提供地理定位数据和安全数据点，如代理、 TOR 节点和爬虫检测。API 还返回货币、时区、 ASN 和公司数据。

这是一个相当新的 API，来自世界各地的多个地区的平均响应时间为40毫秒，这使它跻身于少数几个可用的超快地理定位 API 之列。

大型免费计划，每月最多可免费提供30,000个请求。


提交答案