标签：map break pix 部分 git info google orm element
基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）
html
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Geolocation获取地理位置，配合Google Map API反向地址解析，获取当前位置并显示在google地图上</title> 7 <script async defer src="http://maps.google.cn/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&callback=initMap"> 8 </script> 9 </head> 10 11 <body> 12 <div id="map" style="width: 890px; height: 640px"></div> 13 </body> 14 15 </html>
js部分
1 <script type="text/javascript"> 2 var geocoder; 3 var display = ""; 4 var map; 5 6 function initMap() { 7 geocoder = new google.maps.Geocoder(); 8 9 if (navigator.geolocation) { 10 //获取当前地理位置 11 navigator.geolocation.getCurrentPosition(function(position) { 12 var coords = position.coords; 13 console.log(coords); 14 //指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标 15 var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 16 var myOptions = { 17 zoom: 12, //设定放大倍数 18 center: latlng, //将地图中心点设定为指定的坐标点 19 mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型 20 }; 21 //创建地图，并在页面map中显示 22 map = new google.maps.Map(document.getElementById("map"), myOptions); 23 var marker = new google.maps.Marker({ 24 position: latlng, //将前面设定的坐标标注出来 25 map: map //将该标注设置在刚才创建的map中 26 }); 27 //地址名字解析 28 geocoder.geocode({ 29 ‘location‘: latlng //纬度/经度坐标 30 // ‘address‘: ‘南京‘ string 或者填需要解析的地名. 31 }, function(results, status) { 32 if (status == google.maps.GeocoderStatus.OK) { 33 console.log("获取到的经纬度："); //address_components: Array(6), formatted_address: "中国江苏省南京市", 34 console.log(results[0]) 35 display = "地址: " + results[0].formatted_address; //格式化后的最佳匹配地址（地名可小到街道） 36 37 console.log("位置:" + display); 38 var infowindow = new google.maps.InfoWindow({ 39 content: "<span style=‘font-size:13px‘><b>经纬度: </b>" + 40 "latlng" + latlng + "<br>" + display + "</span>", 41 //坐标的偏移量 42 pixelOffset: 0, 43 position: results[0].geometry.location //GeocoderGeometry 对象 44 45 }); 46 //默认打开信息窗口,点击也弹出信息窗口 47 infowindow.open(map, marker); 48 google.maps.event.addListener(marker, ‘click‘, function() { 49 infowindow.open(map, marker); 50 }); 51 } else { 52 alert("Geocode was not successful for the following reason: " + status); 53 } 54 }); 55 56 }, 57 function(error) { 58 //处理错误 59 switch (error.code) { 60 case 1: 61 alert("位置服务被拒绝。"); 62 break; 63 case 2: 64 alert("暂时获取不到位置信息。"); 65 break; 66 case 3: 67 alert("获取信息超时。"); 68 break; 69 default: 70 alert("未知错误。"); 71 break; 72 } 73 }); 74 } else { 75 alert("你的浏览器不支持HTML5来获取地理位置信息。"); 76 } 77 } 78 </script>
基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）
标签：map break pix 部分 git info google orm element
原文地址：http://www.cnblogs.com/majinyun0802/p/7479077.html
