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>
时间： 2024-12-25 09:35:30