zoukankan      html  css  js  c++  java
  • 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="600px;height:600px;"></div>  
    100 </body>  
    101 </html>
  • 相关阅读:
    【BZOJ2599】[IOI2011]Race 树的点分治
    【BZOJ1787】[Ahoi2008]Meet 紧急集合 LCA
    【BZOJ1834】[ZJOI2010]network 网络扩容 最大流+最小费用流
    【BZOJ3012】[Usaco2012 Dec]First! Trie树+拓补排序
    【BZOJ2743】[HEOI2012]采花 离线+树状数组
    【BZOJ2946】[Poi2000]公共串 后缀数组+二分
    【BZOJ2157】旅游 树链剖分+线段树
    【BZOJ2661】[BeiJing wc2012]连连看 最大费用流
    【BZOJ1801】[Ahoi2009]chess 中国象棋 DP
    【BZOJ4236】JOIOJI STL
  • 原文地址:https://www.cnblogs.com/dontes/p/7017469.html
Copyright © 2011-2022 走看看