H5地理定位以及移动距离计算 

  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>

 

posted @ 2017-06-15 14:16  dontes  阅读(1818)  评论(0)    收藏  举报