Google Maps API使用地址代替经度和纬度 [英] Using Address Instead Of Longitude And Latitude With Google Maps API
本文介绍了Google Maps API使用地址代替经度和纬度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我听说可以提交地址而不是经度和纬度，这对我的系统来说可行得多。用户在创建他们的个人资料和他们的个人资料之后必须输入他们的地址，然后显示他们家的Google地图。我目前的Google Maps API可与Longitude和Latitude完美配合：
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< link rel =stylesheettype =text / csshref =css.css/>
< title>登入网页< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：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>
函数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 ：在地图上标记
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
请有人协助我更改我的代码，以便Google Maps API可以请求地址在它的位置，因为我想直接从mySQL数据库读取用户的地址。 解决方案
请参阅这个例子，将地图初始化为加州圣地亚哥。
使用Google将Javascript地址转换为地理编码器，将地址转换为可以在地图上显示的坐标。
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：地理编码简单< / title>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var geocoder;
var map;
var address =San Diego，CA;
函数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> +地址+'< / b>'，
size：新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（未找到结果）;
}
} else {
alert（地理编码不成功，原因如下：+状态）;
}
}）;
}
}
< / script>
< / head>
< body style =margin：0px; padding：0px;的onload = 初始化（） >
< div id =map_canvasstyle =width：100％; height：100％>
< / body>
< / html>
工作程式码片段：
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（没有找到结果）;}} else {alert（Geocode对于以下原因：+ status）;}}）; }} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map_canvas {height：100％; width：100％;}
< script type = text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>< div id =map_canvas>< / div>
I've heard that it is possible to submit an Address instead of Longitude and Latitude and this would be much more feasible for my system. The user has to input their address when creating their profile and their profile afterwards will then display a Google Maps of their house. I currently have the Google Maps API working perfectly with Longitude and Latitude:
<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>
Please could somebody assist me to alter my code so that it enables the Google Maps API to request an Address in its place because I want to read the Address of the user directly from mySQL database.
解决方案
See this example, initializes the map to "San Diego, CA".
Uses the Google Maps Javascript API v3 Geocoder to translate the address into coordinates that can be displayed on the map.
<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>
working code snippet:
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="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" ></div>
这篇关于Google Maps API使用地址代替经度和纬度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
