HTML5 地理定位

MMNHD

已于 2022-02-17 20:55:42 修改

阅读量834

点赞数 2

分类专栏： html5 文章标签： html5 p2p 前端

于 2022-02-16 21:30:08 首次发布

本文链接：https://blog.csdn.net/m0_63327154/article/details/122971022

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、定位基础与原理
1.IP定位（定位不准确）
通过电脑的IP地址，定位到当前的位置。但是我们平常拿到的IP地址，一般是运营商发布的公网IP，只有一些涉密机构，才能够通过与运行商协商，才能拿到具体的IP。

2.运营商基站定位
只能大致定位当前的位置，是通过运营商的基站，能够确定当前接入的位置距离基站的距离。

3.GPS卫星定位
能够精确到厘米，是通过卫星电波，确定当前所在的位置。但是前提是：当前设备必须有GPS芯片。

二、地理定位的实现

地理定位API允许用户向web应用程序提供他们的位置，但是这个操作需要当前用户授权。

获取地理定位相关代码如下：

<button id="btn">点我获取当前位置</button>

 <script>
btn.addEventListener('click', function(){
      // 获取当前位置
      let geoloc = window.navigator.geolocation
      geoloc.getCurrentPosition(
        (success)=>{ console.log(success) }, //成功
        (error)=>{ console.warn(error) },    //失败
        {timeout: 5000}                      //定义超时
      )
    })
</script>

https://lbs.amap.com/tools/picker

<body>
    <button id="btn">点我获取当前位置</button>
    <script>
        btn.addEventListener('click', function() {
            //获取当前位置
            let geoloc = window.navigator.geolocation
            geoloc.getCurrentPosition(
                //成功后执行的方法
                (success) => {console.log(success);},
                //失败后执行的方法
                (error) => {console.warn(error);},
                //定义超时时间
                {timeout: 50000}
            )
        })
    </script>
</body>

注意：使用edge才能在后台看到位置，

一高德地图开放平台

https://lbs.qq.com/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_map.html</title>
  <style>
    #container {
      width: 400px; height: 400px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'c267e08f12580531eadc767a3bb157e9',
    }
  </script>
  <script type="text/javascript" 
    src="https://webapi.amap.com/maps?v=2.0&key=8a3c893681bbe54be8f81b7e99c934cd"></script> 

  <script>
    // 获取当前位置
    let geoloc = window.navigator.geolocation
    geoloc.getCurrentPosition((success)=>{
      let lat = success.coords.latitude  // 纬度
      let lng = success.coords.longitude // 经度
      var map = new AMap.Map('container', {
        zoom:15,//级别
        center: [lng, lat],//中心点坐标
        viewMode:'3D'//使用3D视图
      });
    }, (err)=>{
      console.warn(err)
    }, {timeout:5000})
  </script>

  </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_map.html</title>
  <style>
    #container {
      width: 400px; height: 400px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'c267e08f12580531eadc767a3bb157e9',
    }
  </script>
  <script type="text/javascript" 
    src="https://webapi.amap.com/maps?v=2.0&key=8a3c893681bbe54be8f81b7e99c934cd"></script> 

  <script>
    // 获取当前位置
    let geoloc = window.navigator.geolocation
    geoloc.getCurrentPosition((success)=>{
      let lat = success.coords.latitude  // 纬度
      let lng = success.coords.longitude // 经度
      var map = new AMap.Map('container', {
        zoom:11,//级别
        center: [lng, lat],//中心点坐标
        viewMode:'3D'//使用3D视图
      });
      
      // 实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 10
      });
      map.add(trafficLayer);//添加图层到地图
      
      // 将当前位置通过点标记的方式添加到地图之上
      let marker = new AMap.Marker({
        position: [lng, lat],
        title: '这是我的家',
        angle: 0   // 旋转角度
      })
      map.add(marker)

      // 点击marker
      marker.on('click', function(e){
        // 弹出InfoWindow
        let infoWindow = new AMap.InfoWindow({ //创建信息窗体
          isCustom: false,  //使用自定义窗体
          content:'<div style="background:#f00;">信息窗体</div>', //信息窗体的内容可以是任意html片段
          offset: new AMap.Pixel(0, -45)
        })
        infoWindow.open(map, e.target.getPosition())
      })
      
      // 添加控件
      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
      ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar({
          position: 'LT'
        }));
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());
        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        map.addControl(new AMap.HawkEye({isOpen:true}));
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType());
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation({
          position: "LB", // {top:'5px', left:xx, right:x}
          offset: [20, 55]
        }));
      });

      // 添加web服务插件
      AMap.plugin([
        'AMap.PlaceSearch',
        'AMap.Geocoder',
        'AMap.Weather'
      ], function(){
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive('北京', function(err, data) {
            console.log("实时天气", data);
        });
        //执行实时天气信息查询
        weather.getForecast('北京市', function(err, data) {
            console.log("天气预报", data);
        });


        // 逆地理编码 通过经纬度检索地址信息
        let geocoder = new AMap.Geocoder()
        geocoder.getAddress(
          [lng, lat], function(status, result){
            console.log(status, result)
        })
        
        // 创建地点搜索服务对象
        let placeSearch = new AMap.PlaceSearch({
          city: '北京',
          pageSize: 50
        })
        placeSearch.search(
          '旅游景点', function(status, result){
            console.log(status, result)
        })
      })

      
    }, (err)=>{
      console.warn(err)
    }, {timeout:5000})

  </script>

  </body>
</html>

MMNHD

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5 地理定位

一、定位基础与原理1.IP定位（定位不准确）通过电脑的IP地址，定位到当前的位置。但是我们平常拿到的IP地址，一般是运营商发布的公网IP，只有一些涉密机构，才能够通过与运行商协商，才能拿到具体的IP。2.运营商基站定位只能大致定位当前的位置，是通过运营商的基站，能够确定当前接入的位置距离基站的距离。3.GPS卫星定位能够精确到厘米，是通过卫星电波，确定当前所在的位置。但是前提是：当前设备必须有GPS芯片。二、地理定位的实现地理定位API...
复制链接

扫一扫