Dem*_*tic 21 google-maps-api-3 street-address
我是谷歌地图的新手,我想将它整合到我的网站(黄页类网站).
我目前有以下代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>
此代码确实有效,并向我显示特定Lat/Long的映射
但是,我希望能够指定地址而不是纬度/长度参数,因为我确实拥有电话簿中公司的地址,但没有lat/long值.
我试着搜索这个,但我只在V2版本上发现了类似的东西,这个版本已被弃用.
Joh*_*nGa 12
您可以使用Google地理编码器:http://code.google.com/apis/maps/documentation/geocoding/小心 - 您可能超出配额,因此对地理编码器的请求将失败
使用Google地理编码API每天的查询限制为2,500个地理定位请求.
How*_*ard 12
您正在寻找的是谷歌服务中的地理编码功能; 首先给出一个地址来获取LatLng,然后调用setCenter将地图平移到特定位置.谷歌的API包装得非常好,你可以通过这个例子看看它是如何工作的:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
如果您对iframe没问题,可以跳过地理编码的麻烦并使用Google Maps Embed API:
Google Maps Embed API可免费使用(没有配额或请求限制),但您必须注册免费的API密钥才能在您的网站上嵌入地图.
例如,您可以将其嵌入到您的页面中(使用您自己的个人Google API密钥替换省略号):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe>
显然,这的用处将取决于您的用例,但我喜欢这是一个快速而肮脏的解决方案.