百度地图获取当前位置添加标记物等基础使用 JavaScript API

怼烎@ 2023-10-07 18:20 79阅读 0赞

目标：实现一个能自动定位我当前位置的地图，并且地图上能显示我想要标记物，以及能搜索地图对应的位置。**这地图只能在IE浏览器上有效果，其他浏览器不支持。**  
![在这里插入图片描述][ce6beffdc3d7422e873fbdf16bf9f67a.png]  
先上效果图：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
**接下来说说怎么实现：**

1.首先先去百度地图开放平台注册个账号：[百度开发平台][Link 1]

然后点击控制台  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
填写开发者资料并认证。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_15_color_FFFFFF_t_70_g_se_x_16]  
2.接着去创建AK，也就是授权码，这个很关键，必须要去申请创建，要不然项目中没法调用百度地图的API。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
这里应用名称随便写，应用类型选择服务端，启用服务按我图中勾选为主。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
设置白名单IP：设置0.0.0.0/0就行![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
点完提交就能获取到AK了，记得保存下来，后面会用到。

3.在对应页面中，引入百度api的js  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 8]

4.写上你想承载这地图dom元素  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 9]

5.实现获取当前位置的Js代码：这里如果获取成功，会执行locationSuccess的回调方法。如果获取失败了，会执行locationError回调方法。

function getNowLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
                    // 指示浏览器获取高精度的位置，默认为false
                    enableHighAccuracy: true,
                    // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
                    timeout: 5000,
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                    maximumAge: 3000
                });
    
            }else{
                alert("浏览器不支持Html5来获取地理位置信息");
            }
        }

locationSuccess回调方法实现：也就是获取当前位置的经度和纬度（H5浏览器自带的定位功能），然后根据经度和纬度获取当前的位置（调用百度api方法）

locationError回调方法实现：

function locationError(error) {
            switch(error.code) {
                case error.TIMEOUT:
                    alert("连接超时，请重试");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('非常抱歉，我们暂时无法为您所在的星球提供位置服务');
                    break;
                case error.PERMISSION_DENIED:
                    alert('您拒绝了使用位置共享服务，查询已取消');
                    break;
                default:
                    alert('发生未知错误!');
                    break;
            }
    
        }

6.接下来使用前面获取到的经度和纬度初始化百度地图：

function initMap(lng, lat, address) {
            var map = new BMap.Map("l-map");
            map.centerAndZoom(new BMap.Point(lng, lat), 20);                   // 初始化地图,设置城市和地图级别。
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            markInfectiveLocation(map);
            markNowLocation(map, lng, lat, address);
            searchKeyWordNote(map);
        }

7.initMap方法中调用了markInfectiveLocation()标记疫情位置方法和markNowLocation标记当前位置的方法和searchKeyWordNote搜索方法。分别看代码：

**Tips**：这里$\{mapsList\}是我从后端获取的数据，然后遍历，你们可以根据自己需求实现。

**坑点：遍历标记物时候，直接遍历会导致所有标记物都只显示最后一条数据的数据。因此先用var infectiveAddress = \[\];进行存储，再对这个存储的数组进行遍历可以解决这个问题。**

完整项目链接：[SSM社区疫情管理系统][SSM]

[ce6beffdc3d7422e873fbdf16bf9f67a.png]: https://img-blog.csdnimg.cn/ce6beffdc3d7422e873fbdf16bf9f67a.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/01602a02e76b4b3599cfa04e6dfbecfa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1b4f1c03e1504b3680938a4973ccb664.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ab9a0a5a75d2497faf39b2491ee45175.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/9207330e1b6c4c59aad84708a6c137b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://lbsyun.baidu.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d0c449ce2a814b35afd4e3c098079499.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4522d1e4bf4340cc9296f528cde1f882.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/29054a60636742c6b662a7f405489544.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/24790a7d8522474fa44401593e4e3998.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/a8fcae24846a4f5aa8e48e667c5156f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/8d84dce058694ab189e28f8e2ad223ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/f07055256f6f44ceacf455f40e0ef2c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[SSM]: https://download.csdn.net/download/dgfdhgghd/82942511