获取用户位置&百度地图API

最新推荐文章于 2024-05-30 11:34:29 发布

世间百态不过尔尔

最新推荐文章于 2024-05-30 11:34:29 发布

阅读量2k

点赞数

分类专栏： web(HTML5) 文章标签：获取用户位置&amp;百度地图API

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88543564

版权

web(HTML5) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Geolocation

1、简介

Geolocation用于获取用户当前的地理位置信息，该对象保存在navigator对象中，地理位置信息属于用户隐私，浏览器不会直接允许访问，当我们需要获取用户位置信息时，浏览器会弹出询问框，如果选择允许则可以获取地理位置信息

2、获取位置信息

语法：

-获取用户当前位置

navigator.geolocation.getCurrentPosition(请求成功后调用的函数,请求失败后调用的参数,{geolocation配置信息})

-第一个参数是请求成功后所需调用的函数

-第二个参数时请求失败后所需调用的函数

-配置信息，可选参数，支持三个参数

-enableHighAccuracy：表示是否高精确度可用，取值为布尔值

-timeout：表示等待相应的最大时间，单位为毫秒，默认是0，表示一直等下去

-maximumAge：表示缓存时间，表示多少毫秒内，不去获取新位置

请求成功后返回的内容

当请求成功后，会返回一个position对象（成功函数的参数），包含以下内容：

-coords.latitude 纬度

-coords.longitude 经度

-coords.accuracy 位置精度

-coords.speed 速度

-coords.heading 方向

-coords.altitude 海拔

百度地图API

1、集成

步骤：

1）成为百度开发者

2）创建应用，获取key

3）引入百度地图api

4）初始化地图对象：地图需要依赖于html元素

5）设置地图中心坐标

6）显示地图

2、添加控件

百度地图上可以对地图进行操作的一些工具，比如放大缩小、定位等

百度地图API提供的有

1）NavigationControl：地图平移司陪房控件，可以用于移动和缩放地图。

2）ScaleControl：比例尺

3、获取位置信息

通过百度Geolocation对象获取

4、地址解析

根据具体地址得到经纬度

LBS：

Location Base Service(基于位置的服务)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <!-- 引入百度地图api -->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=dPP9WMeCrm7FKDHvsgg4XZcs2XMZaCeZ"></script>
    <style>
        #bMap{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="bMap"></div>

    <script>
        // 初始化地图对象，创建地图实例
        var map = new BMap.Map("bMap");
        // 创建点坐标
        var point = new BMap.Point(116.62073,36.948604);
        // 设置中心点坐标和缩放比例:数字越大，看到的区域越小，信息越详细
        // map.centerAndZoom(point,16);

        // 添加控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());

        // 获取地理位置
        // 初始化geolocation对象
        var geo = new BMap.Geolocation();
        //获取用户当前位置
        geo.getCurrentPosition(function(p) {
            console.log(p);
            // 打印获取到的位置信息
            console.log(p.address.city);
            console.log(p.longitude)
        });

        // 地址解析
        // 创建地址解析器实例
        var gc = new BMap.Geocoder();
        // 根据地址得到经纬信息:第一个参数表示要解析的具体地址，第二个参数是解析成功后调用的函数（回调函数）
        gc.getPoint("禹城市德州科技职业学院",function(p){
            console.log(p);//解析地址后得到的经纬度信息
            map.centerAndZoom(p,20);

            // 将得到的点信息添加到地图上
            map.addOverlay(new BMap.Marker(point));
        });
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
获取用户位置&百度地图API

一、Geolocation 1、简介 Geolocation用于获取用户当前的地理位置信息，该对象保存在navigator对象中，地理位置信息属于用户隐私，浏览器不会直接允许访问，当我们需要获取用户位置信息时，浏览器会弹出询问框，如果选择允许则可以获取地理位置信息 2、获取位置信息语法： -获取用户当前位置 navigator.geol...
复制链接

扫一扫