Html5地理定位的使用

小张快跑。

已于 2022-02-17 15:21:08 修改

阅读量2k

点赞数

分类专栏：前端相关工具文章标签： p2p gnu tv javascript 前端

于 2022-02-16 19:36:02 首次发布

本文链接：https://blog.csdn.net/io_123io_123/article/details/122964449

版权

前端相关工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、定位基础与原理

1.IP定位（定位不准确）

通过电脑的IP地址，定位到当前的位置。但是我们平常拿到的IP地址，一般是运营商发布的公网IP，只有一些涉密机构，才能够通过与运行商协商，才能拿到具体的IP。

2.运营商基站定位

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

3.GPS卫星定位

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

二、地理定位的实现

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

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

let geoloc=window.navigator.geolocation
geoloc.getCerrentPosition(
    (result)=>{....},//定位成功后执行的回调方法
    (err)=>{...},//定位失败后执行的回调方法
    {timeout:5000} //定位参数：5000ms不返回结果，则抛出超时错误
)

案例：点击按钮，获取当前定位

高德地图API高德开放平台官网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才能在后台看到位置，其他浏览器不会显示。

三、接入第三方位置服务平台——百度地图、高德地图、腾讯地图

一旦接入了第三方的位置服务平台，可以方便地在自己网页中嵌入地图控件。引入这些第三方位置服务后js后，还可以下显示地图内容，在地图中添加标记，导航，通过web服务接口，查询公交线路，查询周边位置信息，查询经纬度地地点描述字符串等功能。

3.1高德地图开放平台

腾讯位置服务 - 立足生态，连接未来腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/

3.2使用地图JS API

（1）找到文档

（2）注册开发者账号

由于高德地图与支付宝账号是相同的，这里我们选择的是通过支付宝账号进行注册（比较方便）。

登录之后，会提示让你进行身份绑定，我们直接选择个人用户即可。

（3）登陆之后，在进入「应用管理」页面「创建新应用」

（4）为应用“添加key”

四、准备页面

1. 如果是移动端开发（如果不是，则不需要），请在head标签内添加viewport meta标签，以达到最佳的绘制性能；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

2. 添加div标签作为地图容器，同时为该div指定id属性；

<div id="container"></div>

3. 通过 css 为地图容器指定高度、宽度；

#container {width:300px; height: 180px; }

4. JSAPI key和安全密钥的使用（如果你后台使用Ngix，可以参考官方文档中的方案一
准备-入门-教程-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）这里使用的是地图 JS API2.0版本。

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

五、快速上手

1、初次使用地图插件

<body>
    <div id="container"></div>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '15bb164e63e2d99c04365f8067c2ddb8',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=5db184c8c0523723427be7d0d03ddae3"></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>

2、图层

先介绍一下“实时路况图层”