在 Google Maps API 中使用地址而不是经度和纬度
Posted
技术标签:
【中文标题】在 Google Maps API 中使用地址而不是经度和纬度【英文标题】：Using Address Instead Of Longitude And Latitude With Google Maps API 【发布时间】：2013-04-02 07:15:06 【问题描述】：我听说可以提交地址而不是经度和纬度，这对我的系统来说更可行。用户在创建他们的个人资料时必须输入他们的地址，然后他们的个人资料将显示他们家的谷歌地图。我目前的 Google Maps API 与经度和纬度完美配合：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Login Page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html height: 100%
body height: 100%; margin: 0; padding: 0
#map-canvas height: 100%
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<script type="text/javascript">
function initialize()
var mapOptions =
center: new google.maps.LatLng(52.640143,1.28685),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker(
position: new google.maps.LatLng(52.640143,1.28685),
map: map,
title: "Mark On Map"
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
请有人帮助我修改我的代码，以便 Google Maps API 能够在其位置请求地址，因为我想直接从 mysql 数据库中读取用户的地址。
【问题讨论】：
【参考方案1】：请参阅 this example, 将地图初始化为“圣地亚哥，CA”。
使用 Google Maps Javascript API v3 Geocoder 将地址转换为可在地图上显示的坐标。
<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>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="San Diego, CA";
function initialize()
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder)
geocoder.geocode( 'address': address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
);
var marker = new google.maps.Marker(
position: results[0].geometry.location,
map: map,
title:address
);
google.maps.event.addListener(marker, 'click', function()
infowindow.open(map,marker);
);
else
alert("No results found");
else
alert("Geocode was not successful for the following reason: " + status);
);
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
</body>
</html>
工作代码sn-p：
var geocoder;
var map;
var address = "San Diego, CA";
function initialize()
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions:
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder)
geocoder.geocode(
'address': address
, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
);
var marker = new google.maps.Marker(
position: results[0].geometry.location,
map: map,
title: address
);
google.maps.event.addListener(marker, 'click', function()
infowindow.open(map, marker);
);
else
alert("No results found");
else
alert("Geocode was not successful for the following reason: " + status);
);
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map_canvas
height: 100%;
width: 100%;
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" ></div>【讨论】：
【参考方案2】：您可以通过地址解析地理位置。 像这样使用 jquery 创建一个数组：
//follow this structure
var addressesArray = [
'Address Str.No, Postal Area/city'
]
//loop all the addresses and call a marker for each one
for (var x = 0; x < addressesArray.length; x++)
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addressesArray[x]+'&sensor=false', null, function (data)
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
//it will place marker based on the addresses, which they will be translated as geolocations.
var aMarker= new google.maps.Marker(
position: latlng,
map: map
);
);
另外请注意，如果您没有企业帐户，Google 会限制您的搜索结果，如果您使用的地址过多，您会收到错误消息。
【讨论】：
【参考方案3】：地理编码是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如纬度 37.423021 和经度 -122.083739）的过程，可用于放置标记或定位地图。
这是否是您要查找的内容：包含示例代码https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
【讨论】：
【参考方案4】：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'), mapOptions);
function codeAddress()
var address = document.getElementById('address').value;
geocoder.geocode( 'address': address, function(results, status)
if (status == '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);
);
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
或者参考文档https://developers.google.com/maps/documentation/javascript/geocoding
【讨论】：
【参考方案5】：我想我会分享这个我以前使用过的代码 sn-p，这会通过 Geocode 添加多个地址并将这些地址添加为 Markers...
var addressesArray = [
'Address Str.No, Postal Area/city',
//follow this structure
]
var map = new google.maps.Map(document.getElementById('map'),
center:
lat: 12.7826,
lng: 105.0282
,
zoom: 6,
gestureHandling: 'cooperative'
);
var geocoder = new google.maps.Geocoder();
for (i = 0; i < addressArray.length; i++)
var address = addressArray[i];
geocoder.geocode(
'address': address
, function(results, status)
if (status === 'OK')
var marker = new google.maps.Marker(
map: map,
position: results[0].geometry.location,
center:
lat: 12.7826,
lng: 105.0282
,
);
else
alert('Geocode was not successful for the following reason: ' + status);
);
【讨论】：
以上是关于在 Google Maps API 中使用地址而不是经度和纬度的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Google Maps API v3 突出显示地址？
如何使用字符串地址在 google maps API V2 android 中获取地理坐标？