利用Google Map API获取给定地址的经纬度

代码我在google map api demo的基础上小小的修改了下:

 

  
  
  
  
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  6. <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
  7. <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
  8. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
  9. <script type="text/javascript"> 
  10.   var geocoder; 
  11.   var map; 
  12.   function initialize() { 
  13.     geocoder = new google.maps.Geocoder(); 
  14.     var latlng = new google.maps.LatLng(31.23, 121.47); 
  15.     var myOptions = { 
  16.       zoom: 12, 
  17.       center: latlng, 
  18.       mapTypeId: google.maps.MapTypeId.ROADMAP 
  19.     } 
  20.     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  21.   } 
  22.  
  23.   function codeAddress() { 
  24.     var address = document.getElementById("address").value; 
  25.     geocoder.geocode( { 'address': address}, function(results, status) { 
  26.       if (status == google.maps.GeocoderStatus.OK) { 
  27.         console.log(results[0].geometry.location) 
  28.         map.setCenter(results[0].geometry.location); 
  29.         this.marker = new google.maps.Marker({ 
  30.                 title:address, 
  31.             map: map,  
  32.             position: results[0].geometry.location 
  33.         }); 
  34.                 var infowindow = new google.maps.InfoWindow({ 
  35.                     content: '<strong>'+address+'</strong><br/>'+'纬度: '+results[0].geometry.location.Da+'<br/>经度: '+results[0].geometry.location.Ea 
  36.                 }); 
  37.                 infowindow.open(map,marker); 
  38.       } else { 
  39.         alert("Geocode was not successful for the following reason: " + status); 
  40.       } 
  41.     }); 
  42.   } 
  43. </script> 
  44. </head> 
  45. <body onload="initialize()"> 
  46.   <div> 
  47.     <input id="address" type="textbox" value="上海市"> 
  48.     <input type="button" value="地址解析" onclick="codeAddress()"> 
  49.   </div> 
  50. <div id="map_canvas" style="height:90%;top:30px"></div> 
  51. </body> 
  52. </html> 

你可能感兴趣的:(Google,map,职场,经纬度,休闲)