如何使用谷歌地理定位 API？
Posted
技术标签:
【中文标题】如何使用谷歌地理定位 API？【英文标题】：How to work with Google geolocation API? 【发布时间】：2017-04-13 09:19:07 【问题描述】：我正在开展一个网络开发项目，我需要在该项目中获取用户的确切位置信息（例如地区、城市、州和国家/地区）。我该怎么做？
【问题讨论】：
【参考方案1】：您可以使用 Google 的地理编码器 和 HTML5 地理定位器 来完成这项工作。您需要为 Google 的 Geocoder 提供地址或纬度 lng，我们将使用 HTML5 Geolocater 获得这些信息。我将向您展示如何执行此操作，但您可以通过我提供的链接在下面阅读有关地理编码的更多信息。无论如何，我们可以使用 HTML5 Geolocater 获取用户的 lat lng。然后，您可以使用 Google 的地理编码器来获取城市、州、街道和邮政编码。 以下是执行此操作的步骤：
首先，将 Google 的 Geocoder 放入一个变量。
var geocoder = new google.maps.Geocoder;
然后用HTML5 Geocoder获取用户的lat lng，并使用Google's Geocoder将其变成地址。
if(navigator.geolocation)
// call this function to get the location
navigator.geolocation.getCurrentPosition(function(position)
// the results return as a lat lng,
//which we will put them into a variable to use in Google's Geocoder
var pos =
lat: position.coords.latitude,
lng: position.coords.longitude
;
// Now we can get the location info(city, state, zip) with Google's Geocoder
geocoder.geocode('location': pos, function(results, status)
if(status === 'OK')
console.log(results);
);
);
然后你可以对结果做任何你想做的事情。希望这会有所帮助！
来源： https://developers.google.com/maps/documentation/javascript/geolocation
【讨论】：
【参考方案2】：<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="navbar"><span>Geolocation API</span></div>
<div id="wrapper">
<button id="location-button">Get User Location</button>
<div id="output"></div>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXYOURXXGOOGLEXXAPIXXKEYXXXX&libraries=places"></script>
<script>
$('#location-button').click(function()
var location_address_arr = Array();
var location_address = '';
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(position)
console.log(position);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
var geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode( 'latLng': latlng , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
// console.log(results);
if(results.length > 0)
var place = results[0];
var city_long_name = '';
var client_company_city = '';
var client_company_state = '';
var client_company_country = '';
var client_company_postal_code = '';
for (var i = 0; i < place.address_components.length; i++)
var addressType = place.address_components[i].types[0];
var long_name = place.address_components[i].long_name;
// alert(addressType);
if(city_long_name=='')
if(addressType=='postal_town')
// city
city_long_name = place.address_components[i].long_name;
else if (addressType=='administrative_area_level_1')
// city
city_long_name = place.address_components[i].long_name;
else if (addressType=='locality')
// city
city_long_name = place.address_components[i].long_name;
if(addressType=='administrative_area_level_1')
// state
client_company_state = long_name;
if(addressType=='country')
// country
client_company_country = long_name;
if(addressType=='postal_code')
// postal_code
client_company_postal_code = long_name;
//
client_company_city = city_long_name;
// city
if(client_company_city!='')
location_address_arr.push(client_company_city);
// state
if(client_company_state!='')
location_address_arr.push(client_company_state);
// country
if(client_company_country!='')
location_address_arr.push(client_company_country);
// zipcode
if(client_company_postal_code!='')
location_address_arr.push(client_company_postal_code);
if(location_address_arr.length > 0)
location_address = location_address_arr.join(', ');
alert(location_address);
);
);
);
</script>
</body>
</html>
【讨论】：
以上是关于如何使用谷歌地理定位 API？的主要内容，如果未能解决你的问题，请参考以下文章
使用带有 jquery 的谷歌地图地理定位 api（wifi 查找）