Google Maps Geocoding API（如何获取纬度/经度）
Posted
技术标签:
【中文标题】Google Maps Geocoding API（如何获取纬度/经度）【英文标题】：Google Maps Geocoding API (How to get Lat/Long) 【发布时间】：2015-07-10 10:16:45 【问题描述】：我正在开发一个与地图交互的 Web 应用程序，因此我使用的是 Google Maps javascript API (v3.0)。
该应用程序将有一个搜索框（html <input> 标签），用户可以在其中输入人类可读的地名（如“19/2 Pine Street, Seattle”）并点击按钮。输入应发送至 Google Maps API，并应返回搜索地点的地理位置（纬度和经度）。
我搜索了 Google Maps API 文档，但那里的一切都太混乱了。我希望是否有人可以帮助我定制解决方案。
这是我到目前为止所做的：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Rails App</title>
<script src="https://maps.googleapis.com/maps/api/js?key=[key-here]"></script>
<script>
var geocoder;
function initialize()
geocoder = new google.maps.Geocoder();
function codeAddress()
var address = document.getElementById("address").value;
geocoder.geocode( 'address': address , function(r, s)
alert(r[0].geometry.location);
);
</script>
</head>
<body onload="initialize()">
<input type="search" id="address">
<input type="button" value="Submit" onclick="codeAddress()">
</body>
</html>
谢谢！
【问题讨论】：
您提到了地理编码 API，所以我想您已经阅读了文档。到目前为止，您在尝试时遇到了什么困难？ @TaoP.R.目前，代码采用搜索输入并提醒预测的纬度/经度。但我也需要自动完成功能（在打字时，它会显示一个地点列表作为建议）。就像在这个例子中：google-developers.appspot.com/maps/documentation/javascript/… developers.google.com/maps/documentation/javascript/examples/… 一切都在那里。 您发布的代码对我有用（fiddle（有地图和没有地图）） 【参考方案1】： <script src="https://maps.googleapis.com/maps/api/js?key=[key-here]">you forgot to close the script tag</script>
这就是为什么它不起作用
编辑：自动完成，我刚刚拼凑的一些东西
googlePlaceSearch = function (qry, callback)
var placeSearch, autocomplete;
var addressParts =
street_number: '',
route: '',
locality: '',
administrative_area_level_1: '',
country: '',
postal_code: ''
;
var componentForm =
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
;
var fillInAddress()
placeSearch.style.display = 'none';
var place = autocomplete.getPlace();
if (place)
place.address_components.forEach(function (comp)
var addressType = comp.types[0];
if (componentForm[addressType])
addressParts[addressType] = comp[componentForm[addressType]];
);
callback(addressParts);
google.maps.event.removeListener(autocomplete, 'place_changed', fillInAddress);
autocomplete = new google.maps.places.Autocomplete((document.querySelector(qry)),
types: ['address']
);
google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
;
开始使用
googlePlaceSearch("#address", someFn);
其中 #address 是一个 CSS 选择器，用于定位输入元素（在你的情况下很简单，就像我所说的那样，#address，但我把它放在一起是为了灵活），而 someFn 是一个接收 @ 的函数987654324@ 这样你就可以用返回的地址做你想做的事了
【讨论】：
糟糕！那是个错误。但我仍然需要自动完成功能。 哦，FFS - 我整理了一个通用的自动完成功能，同时你回答了你自己的问题：p【参考方案2】：哦，我刚刚找到了解决方案：
<script src="https://maps.googleapis.com/maps/api/js?key=[key-here]&libraries=places"></script>
<script>
var geocoder;
function initialize()
geocoder = new google.maps.Geocoder();
function codeAddress()
var input = document.getElementById("address");
var autocomplete = new google.maps.places.Autocomplete(input);
var address = document.getElementById("address").value;
geocoder.geocode( 'address': address , function(r, s)
alert(r[0].geometry.location);
);
</script>
和 HTML：
<body onload="initialize()">
<input type="search" id="address">
<input type="button" value="Submit" onclick="codeAddress()">
</body>
【讨论】：
以上是关于Google Maps Geocoding API（如何获取纬度/经度）的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps Geocoding API - 使用 API 密钥拒绝请求
Google Maps Geocoding API 使用限制
Google Maps Geocoding API（如何获取纬度/经度）
使用 Google Maps JavaScript API v3 和 Geocoding API 映射多个位置