Google Maps API - 如何在不显示地图的情况下从自动完成获取纬度和经度？
Posted
技术标签:
【中文标题】Google Maps API - 如何在不显示地图的情况下从自动完成获取纬度和经度？【英文标题】：Google Maps API - how to get latitude and longitude from Autocomplete without showing the map? 【发布时间】：2012-11-08 20:11:42 【问题描述】：我正在尝试从 Autocomplete Google Maps API 获取纬度和经度，但不显示地图。在我的脚本中，自动补全效果很好，但我无法获得纬度和经度。
<script type="text/javascript">
function initialize()
var options =
types: ['(cities)']
;
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(window, 'load', initialize);
var geocoder = new google.maps.Geocoder();
var address = autocomplete;
geocoder.geocode( 'address': address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert(latitude);
);
</script>【问题讨论】：
【参考方案1】：Youtube 视频：https://youtu.be/8QYiGuq5LG4 这将有助于在不显示 gmap 的情况下获得纬度/经度。
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
#pac-input:focus
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=[YOUR-KEY]"></script>
<script>
function initialize()
var address = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function()
var place = autocomplete.getPlace();
if (!place.geometry)
return;
var address = '';
if (place.address_components)
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
【讨论】：
【参考方案2】：<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDB1ujwvkFEo87xhHyHhHP52iJ6zMlbB_w&libraries=places&callback=initMap" async defer></script>
</head>
<body>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input type="text" id="Lat" />
<input type="text" id="Lng" />
</body>
<script type="text/javascript">
function initialize()
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function ()
var place = autocomplete.getPlace();
document.getElementById('Lat').value = place.geometry.location.lat();
document.getElementById('Lng').value = place.geometry.location.lng();
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
【讨论】：
它肯定会工作。如果您有 google api 密钥，请用我的密钥替换您的密钥..谢谢 您可以为您的 API 密钥设置限制。【参考方案3】：到 2020 年底，这很简单，如下所示。
要在从地点下拉列表中选择的地点上显示geometry 键，应使用setFields() 方法在Autocomplete 对象实例上设置字段geometry。
代码应该是这样的。
加载 API 库：
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initAutocomplete"
初始化自动完成并处理所选地点数据，通常与上述所有答案相同。但是使用autocomplete.setFields(['geometry']) 来获取坐标；
const autocomplete;
// Init the autocomplete object
function initAutocomplete()
autocomplete = new window.google.maps.places.Autocomplete(
document.getElementById('current_location'), types: ["geocode"]
);
// !!! This is where you set `geometry` field to be returned with the place.
autocomplete.setFields(['address_component', 'geometry']); // <--
autocomplete.addListener("place_changed", fillInAddress);
// Process the address selected by user
function fillInAddress()
const place = autocomplete.getPlace();
// Here you can get your coordinates like this
console.log(place.geometry.location.lat());
console.log(place.geometry.location.lng());
请参阅 Autocomplete.setFields 和 geometry option 上的 Google API 文档。
【讨论】：
【参考方案4】：HTML：
<input type="text" id="address" name="address" value=""> //Autocomplete input address
<input type="hidden" name="s_latitude" id="s_latitude" value="" /> //get latitude
<input type="hidden" name="s_longitude" id="s_longitude" value="" /> //get longitude
Javascript：
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"
async defer></script>
<script>
var input = document.getElementById('address');
var originLatitude = document.getElementById('s_latitude');
var originLongitude = document.getElementById('s_longitude');
var originAutocomplete = new google.maps.places.Autocomplete(input);
originAutocomplete.addListener('place_changed', function(event)
var place = originAutocomplete.getPlace();
if (place.hasOwnProperty('place_id'))
if (!place.geometry)
// window.alert("Autocomplete's returned place contains no geometry");
return;
originLatitude.value = place.geometry.location.lat();
originLongitude.value = place.geometry.location.lng();
else
service.textSearch(
query: place.name
, function(results, status)
if (status == google.maps.places.PlacesServiceStatus.OK)
originLatitude.value = results[0].geometry.location.lat();
originLongitude.value = results[0].geometry.location.lng();
);
);
</script>
【讨论】：
【参考方案5】：您可以使用下面的代码。
<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize()
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function ()
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
//alert("This function is working!");
//alert(place.name);
// alert(place.address_components[0].long_name);
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这部分在您的表单中：
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
希望对你有帮助。
【讨论】：
如何将国家和行政区域添加到此解决方案中？我想要国家、行政区域（州）、城市、经纬度。【参考方案6】：您可以从地点对象获取 lat、lng，即
var place = autocomplete.getPlace();
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
【讨论】：
【参考方案7】：只需要：
var place = autocomplete.getPlace();
// get lat
var lat = place.geometry.location.lat();
// get lng
var lng = place.geometry.location.lng();
【讨论】：
谢谢伙计。工作一种享受。只是指出autocomplete是new google.maps.places.Autocomplete(nativeElement创建的对象，options)`【参考方案8】：
是的，你可以：
var place = autocomplete.getPlace();
document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lon').value = place.geometry.location.lng();
【讨论】：
【参考方案9】：您无需任何额外的 api 或 url 调用即可从同一个 api 获取。
HTML
<input class="wd100" id="fromInput" type="text" name="grFrom" placeholder="From" required/>
Javascript
var input = document.getElementById('fromInput');
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 1512631)
)
var options =
bounds: defaultBounds
var autocomplete = new google.maps.places.Autocomplete(input, options);
var searchBox = new google.maps.places.SearchBox(input,
bounds: defaultBounds
);
google.maps.event.addListener(searchBox, 'places_changed', function()
var places = searchBox.getPlaces();
console.log(places[0].geometry.location.G); // Get Latitude
console.log(places[0].geometry.location.K); // Get Longitude
//Additional information
console.log(places[0].formatted_address); // Formated Address of Place
console.log(places[0].name); // Name of Place
if (places.length == 0)
return;
var bounds = new google.maps.LatLngBounds();
console.log(bounds);
);
【讨论】：
【参考方案10】：您无法从自动完成 API 获取纬度/经度，因为谷歌从该 API 生成的数据不包含纬度和对数字段。 示例：-
"predictions" : [
"description" : "IIT Mumbai, Mumbai, Maharashtra, India",
"id" : "ac3235cda973818a89b5fe21ad0f5261ac9b6723",
"matched_substrings" : [
"length" : 10,
"offset" : 0
],
"reference" : "CkQ0AAAAHWg-RSngiYHHdz_yqyFKmfSoBwT-_PW0k8qQDhsbiVrk7BlPHCyJb58OthledMUTGYS5Vhec1Zj2L7w9Rq0zDxIQrbn05RX1QgWHkSXsmTk1TRoU45APW2BBRIUsA3t6XBy_8s0BPPA",
"terms" : [
"offset" : 0,
"value" : "IIT Mumbai"
,
"offset" : 12,
"value" : "Mumbai"
,
"offset" : 20,
"value" : "Maharashtra"
,
"offset" : 33,
"value" : "India"
],
"types" : [ "establishment", "geocode" ]
],
"status" : "OK"
您可以使用 Google API 从您的地址获取经度和纬度。正如您已经说过的，您应该在应该插入结果的地方实现一个隐藏字段。然后您可以将位置与坐标一起保存。
例如https://maps.googleapis.com/maps/api/geocode/json?address=IIT%20Area,%20Mumbai,%20Maharashtra,%20India&sensor=false
我最近在我的一个项目中实现了这个功能：
function getLatLngFromAddress(city, country)
var address = city +", "+ country;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( 'address': address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
$('#latitude').val(results[0].geometry.location.Pa);
$('#longitude').val(results[0].geometry.location.Qa);
else
console.log("Geocode was not successful for the following reason: " + status);
);
【讨论】：
只需使用 Place Details 作为您获得的 place_id developers.google.com/places/documentation/details place.geometry.location.lat()【参考方案11】：Google Places API 还提供 REST api，包括 Places Autocomplete。 https://developers.google.com/places/documentation/autocomplete
但从服务中检索的数据必须用于地图。
【讨论】：
现在看来不是这样。 Google API 文档说：“即使没有地图，您也可以使用 Place Autocomplete。如果您显示地图，它必须是 Google 地图。当您在没有地图的情况下显示 Place Autocomplete 服务的预测时，您必须包括 'powered由谷歌的标志。”这取自 API 文档：developers.google.com/places/documentation/autocomplete (d) 不可用于非 Google 地图。客户不得在包含非 Google 地图的客户应用程序中使用 Google 地图核心服务。例如，客户不会 (i) 在非 Google 地图上显示 Places 列表，或 (ii) 在同一客户应用程序中显示街景图像和非 Google 地图。您不能将地点 API 数据用于与地图无关的目的。您可以在应用中实现地点自动填充功能，但不能将其用于（重复使用）其他用途，例如广告列表。以上是关于Google Maps API - 如何在不显示地图的情况下从自动完成获取纬度和经度？的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps Android API - 如何在拖动时移动标记的锚点
如何在 android 上使用 google maps api v2 很好地管理标记
Google Maps API：在不重新加载地图的情况下关注并居中我的观察位置