Google Maps API使用地址而不是经度和纬度
我听说有可能提交一个地址，而不是经度和纬度，这对我的系统来说更可行。 用户在创build他们的个人资料时必须input他们的地址，然后他们的个人资料将显示他们家的Google地图。 我目前的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数据库中读取用户的地址。
看到这个例子，将地图初始化为“San Diego，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>
工作代码片段：
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>
这是我的代码从位置生成地图
HTML代码
<div class="col-md-2"> <address> <?php echo $doctorInfo[0]->serachLocation;?> // set address for which you need to generate map</address> </div>
Javascript代码
<script> $(document).ready(function(){ $("address").each(function(){ var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed'> </iframe>"; $(this).html(embed); }); }); </script>
了解更多点击这里
地理编码是将地址（如“1600 Amphitheatre Parkway，Mountain View，CA”）转换为地理坐标（如纬度37.423021和经度-122.083739）的过程，您可以使用它来放置标记或放置地图。
这是你在找什么：包含示例代码
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
您可以通过地址parsing地理位置。 像这样使用jquery创build一个数组：
var addressesArray = [ 'Address Str.No, Postal Area/city', //follow this structure ] //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); var aMarker= new google.maps.Marker({ position: latlng, //it will place marker based on the addresses, which they will be translated as geolocations. map: map }); }
另外请注意，如果您没有自己的商家帐户，Google会限制您的结果，而且如果您使用的地址太多，则会出现错误。
