HTML5(地理位置)

weixin_33860722發表於2017-07-03
HTML
6380788-f429cfa9902e2731.jpg
週一、北京、多雲
  • H5地理位置 geolocation
    (1) 測試用例
    (2) 百度地圖API

純H5地理位置 geolocation

測試用例
  <script>          window.navigator.geolocation.getCurrentPosition(function(res) {
    console.log(res);
  }, function(err) {
    console.log(err);
  })
  </script>

####### PositionError（錯誤碼 錯誤資訊）

  • code: 1 message: "User denied Geolocation" -> 使用者拒絕授權

  • code: 1 message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). -> 僅允許HTTPS訪問

  • code:2 message:"Network location provider at 'https://www.googleapis.com/' : No response received." -> 沒翻牆

百度地圖API

  • timestamp 時間戳

  • coords -> 地理座標

  • accuracy:26 -> 精確度

  • altitude:null -> 海拔

  • altitudeAccuracy:null -> 海拔高度精確度

  • heading:null -> 方向

  • latitude:31.167638 -> 緯度

  • longitude:121.423593 -> 經度

  • speed:null -> 速度

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {
    user-select: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微軟雅黑";
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wmwHFMPxi66GlPBVUrdgEhDzbLUqlSrM"></script>
    <title></title>
    </head>
    <body>
    <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(121.423593, 31.167638), 20); // 初始 化地圖,設定中心點座標和地圖級別

       map.addControl(new   BMap.MapTypeControl()); //新增地圖型別控制元件
   map.setCurrentCity("上海"); // 設定地圖顯示的城市 此項是必須設定的
 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放

 navigator.geolocation.getCurrentPosition(function(res) {
 var {
     coords: {
         longitude,
         latitude
     }
 } = res;

 var point = new BMap.Point(longitude, latitude);

 var marker = new BMap.Marker(point);
 map.addOverlay(marker);

 marker.setAnimation(BMAP_ANIMATION_BOUNCE)

 map.panTo(point)
 }, function(err) {
 console.log(err);
 })
 </script>

相關文章