调用百度地图显示当前位置

沐小侠

已于 2022-02-11 14:33:00 修改

阅读量1.6k

点赞数 2

分类专栏： HTML+CSS+JS 文章标签：百度 javascript 前端

于 2022-02-11 14:29:39 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/122879847

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

获取百度密钥

注意：JavaScript API只支持浏览器类型的ak，请在申请ak时注意选择。

申请百度密钥链接：http://lbsyun.baidu.com/apiconsole/key?application=key
实现代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
        <title>Geolocation</title>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

            #container {
                width: 70%;
                height: 100%;
                margin: 20px auto;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <!--加载百度 map api-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>  
    
        <script>
        	//检测浏览器是否支持定位API
            if (navigator.geolocation) {
            	// getCurrentPosition方法来获取当前位置的坐标值
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude; // 纬度
                    var longitude = position.coords.longitude; // 经度
                    console.log("经度：" + longitude + "纬度：" + latitude);
                    // container表示注入哪个容器
                    var map = new BMap.Map("container");
                    // 把经度纬度传给百度
                    var point = new BMap.Point(longitude, latitude);
                    ///初始化地图，设置中心点坐标和地图级别
                    map.centerAndZoom(point, 15);
                    //坐标转换
                    var convertor = new BMap.Convertor();
                    var pointArr = [];
                    pointArr.push(point);
                    convertor.translate(pointArr, 1, 5, translateCallback);
                    //坐标转换完之后的回调函数
                    function translateCallback(data) {
                        if (data.status === 0) {
                            // 创建标注
                            var marker = new BMap.Marker(data.points[0]
                            map.addOverlay(marker);
                            map.setCenter(data.points[0]);
                        }
                    }   
                }, function(error) {
                    console.log(error.code)
                })
            }
        </script>
    </body>
</html>

显示效果：

3. 目前国内主要有以下三种坐标系：

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。非中国地区地图，服务坐标统一使用WGS84坐标。

百度对外接口的坐标系为BD09坐标系，并不是GPS采集的真实经纬度，在使用百度地图JavaScript API服务前，需先将非百度坐标通过坐标转换接口转换成百度坐标。
在这里插入图片描述