地理定位（以百度地图开发平台为例）

杨桃贝贝

于 2024-06-21 10:47:25 发布

阅读量116

点赞数 2

文章标签：地理定位

本文链接：https://blog.csdn.net/m0_63977330/article/details/139746093

版权

<!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 {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <!-- 1.填写密钥(ak) -->
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
    <title>地图展示</title>


    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <h1 class="text1"></h1>
    <h2 class="text2"></h2>
    <div id="allmap"></div>
</body>

</html>
<!-- 2.0  -->
<script type="text/javascript">

    // 1） hello world
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    // var map = new BMapGL.Map("allmap");
    // // 创建Map实例
    // // 广州: 113.2759952545166, 23.117055306224895
    // // 北京: 116.404, 39.915
    // var bp = new BMapGL.Point(113.2759952545166, 23.117055306224895);
    // // 初始化地图,设置中心点坐标和地图级别
    // map.centerAndZoom(bp, 11);
    // //开启鼠标滚轮缩放
    // map.enableScrollWheelZoom(true);

    // 2) 定位 (有精准度和成功率)
    // var map = new BMapGL.Map("allmap");
    // var point = new BMapGL.Point(116.331398, 39.897445);
    // map.centerAndZoom(point, 12);
    // var geolocation = new BMapGL.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //         var mk = new BMapGL.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         // 获取经纬度
    //         console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
    //         document.querySelector(".text1").innerText = '您的位置：' + r.point.lng + ',' + r.point.lat;
    //         document.querySelector(".text2").innerText = '您的位置：经度:' + r.point.lng + ',纬度:' + r.point.lat;
    //     }
    //     else {
    //         alert('failed' + this.getStatus());
    //     }
    // });

    // 3) IP定位
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);
    function myFun(result) {
        var cityName = result.name;
        map.setCenter(cityName);
        console.log("当前定位城市:" + cityName);
        console.log(result);
        document.querySelector(".text1").innerText = '您的位置：' + result.center.lng + ',' + result.center.lat;
        document.querySelector(".text2").innerText = '您的位置：经度:' + result.center.lng + ',纬度:' + result.center.lat;
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);


    // 4) SDK辅助定位
    // var map = new BMapGL.Map("allmap");
    // var point = new BMapGL.Point(116.331398, 39.897445);
    // map.centerAndZoom(point, 12);

    // var geolocation = new BMapGL.Geolocation();
    // // 开启SDK辅助定位
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function (r) {
    //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //         var mk = new BMap.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    //         document.querySelector(".text1").innerText = '您的位置：' + r.point.lng + ',' + r.point.lat;
    //         document.querySelector(".text2").innerText = '您的位置：经度:' + r.point.lng + ',纬度:' + r.point.lat;
    //     }
    //     else {
    //         alert('failed' + this.getStatus());
    //     }
    // });

</script>