HTML5获取地理位置及百度地图展示实例

原文地址

 这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。
测试实例包含了以下功能:
(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况)
(2)通过移动端浏览器及GPS定位位置坐标
(3)根据位置坐标转换百度地图坐标
(4)根据位置坐标逆推城市具体地址功能(存在一定误差)
(5)通过使用百度API展示地理位置及添加标注功能


[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>地理位置测试</title>  
  6.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  7.     <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  
  8.     <script type="text/javascript">  
  9.         var map;  
  10.         var gpsPoint;  
  11.         var baiduPoint;  
  12.         var gpsAddress;  
  13.         var baiduAddress;  
  14.   
  15.         function getLocation() {  
  16.             //根据IP获取城市  
  17.             var myCity = new BMap.LocalCity();  
  18.             myCity.get(getCityByIP);  
  19.   
  20.             //获取GPS坐标  
  21.             if (navigator.geolocation) {  
  22.                 navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });  
  23.             } else {  
  24.                 alert("您的浏览器不支持使用HTML 5来获取地理位置服务");  
  25.             }  
  26.         }  
  27.         
  28.         function showMap(value) {  
  29.             var longitude = value.coords.longitude;  
  30.             var latitude = value.coords.latitude;  
  31.             map = new BMap.Map("map");  
  32.             //alert("坐标经度为:" + latitude + ", 纬度为:" + longitude );  
  33.             gpsPoint = new BMap.Point(longitude, latitude);    // 创建点坐标  
  34.             map.centerAndZoom(gpsPoint, 15);  
  35.   
  36.             //根据坐标逆解析地址  
  37.             var geoc = new BMap.Geocoder();  
  38.             geoc.getLocation(gpsPoint, getCityByCoordinate);  
  39.   
  40.             BMap.Convertor.translate(gpsPoint, 0, translateCallback);  
  41.         }  
  42.   
  43.         translateCallback = function (point) {  
  44.             baiduPoint = point;  
  45.             var geoc = new BMap.Geocoder();  
  46.             geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);  
  47.         }  
  48.   
  49.         function getCityByCoordinate(rs) {  
  50.             gpsAddress = rs.addressComponents;  
  51.             var address = "GPS标注:" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;  
  52.             var marker = new BMap.Marker(gpsPoint);  // 创建标注  
  53.             map.addOverlay(marker);              // 将标注添加到地图中  
  54.             var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });  
  55.             marker.setLabel(labelgps); //添加GPS标注      
  56.         }  
  57.   
  58.         function getCityByBaiduCoordinate(rs) {  
  59.             baiduAddress = rs.addressComponents;  
  60.             var address = "百度标注:" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;  
  61.             var marker = new BMap.Marker(baiduPoint);  // 创建标注  
  62.             map.addOverlay(marker);              // 将标注添加到地图中  
  63.             var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });  
  64.             marker.setLabel(labelbaidu); //添加百度标注    
  65.         }  
  66.   
  67.         //根据IP获取城市  
  68.         function getCityByIP(rs) {  
  69.             var cityName = rs.name;  
  70.             alert("根据IP定位您所在的城市为:" + cityName);  
  71.         }  
  72.   
  73.         function handleError(value) {  
  74.             switch (value.code) {  
  75.                 case 1:  
  76.                     alert("位置服务被拒绝");  
  77.                     break;  
  78.                 case 2:  
  79.                     alert("暂时获取不到位置信息");  
  80.                     break;  
  81.                 case 3:  
  82.                     alert("获取信息超时");  
  83.                     break;  
  84.                 case 4:  
  85.                     alert("未知错误");  
  86.                     break;  
  87.             }  
  88.         }  
  89.   
  90.         function init() {  
  91.             getLocation();  
  92.         }  
  93.   
  94.         window.onload = init;  
  95.   
  96.     </script>  
  97. </head>  
  98. <body>  
  99.     <div id="map" style="width:600px;height:600px;"></div>  
  100. </body>  
  101. </html>  
以手机UC浏览器测试正常。需要授权浏览器获取位置权限。更多实例可参考百度API:http://developer.baidu.com/map/jsdemo.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值