百度地图API踩坑（二）

最新推荐文章于 2023-08-24 13:42:44 发布

这不是去幼儿园的校车

最新推荐文章于 2023-08-24 13:42:44 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/m0_52719001/article/details/117439779

版权

一天更新两篇文章我觉得可以了，请各位大佬点个赞好么，之前有人问我为什么要做JavaScript API GL的项目 v3版本的项目不香么，而且功能什么的都已经开发优化的相当好了，其实我是没注意，哈哈哈哈哈，GL有3d效果，很酷炫所以当时直接用GL写的项目。哦对，这里一定要注意，如果你的项目是要商用，一定要申请商用授权！！！！！！切记切记，因为我这个是自己踩坑自己用的，所以没关系，但是要商用的大佬们，一定要申请商用授权！！！！

好了，废话不多少，开始本章的踩坑了，再前一篇文章中，我主要给大家详细讲了一下hello world 之前的准备工作，和我对代码的一些理解，这篇文章我们就要开始过渡了，我会向大家介绍一些百度地图API开发过程中的一些必不可少的小功能，ok我们开始吧。

三、覆盖物

在介绍覆盖物之前，一定要给大家说一个概念，很重要，请开始做笔记：

在百度地图中，几乎所有添加在地图上的标记（包括覆盖物、信息弹窗等等显示在地图上的东西）都拥有所属于他们自己的图层，换句话说，你可以把百度地图当作一张超级大的图片（这里称他为图片层），所有的点覆盖物（标记点）也都属于一个图层，所有的百度地图自带的信息弹窗也都属于一个图层....这若干个图层，图片层位于最底部，然后其他图层会相互往图片层上叠加，因为各个图层的背景透明，所以看起来他们就好像在一起。相信有过PS/AI经验的大佬们会更清楚这句话，简单来说，地图的各个覆盖物是储存于不同的地方，这么一说可能有些朋友心中的疑惑就会被解开了，这个问题我们在本章中先不说了，因为之后会遇到，到时候会给大家说我的解决办法。

插一句题外话，在之后我所有编写的文章中，并不会有完整的代码，大部分都是某段的节选，因为大家都是程序猿，我并不赞同复制粘贴真的会帮助到底，我想要告诉大家的是我解决某个问题的思路，这是最关键的，因为大家编写代码的思路、风格都不相同，所以同一段代码根本无法解决所有人的需求，而我们可以做的只是提供给大家这么一个思路，具体怎么实现还是要靠自己，因为不可能有人比你更清楚你自己写的代码，所以呢，想要告诉刚入行的朋友们（当然我自己也是入行没多久）千万不要盲目的复制粘贴了，每段代码希望都可以加入你自己的思考，这样这些知识、技巧才会留在你的脑子里。

好了，插完话了，我接下来开始给大家介绍覆盖物的一系列特性：

首先，定义方法，要知道关于百度地图API，几乎所有的功能我们都需要通过js来实现，所以我们一定要拥有良好的JavaScript语言基础，不然根本无从下手，

点覆盖物（通常称标记）：

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

这是百度地图API官网给出的例子，在上面我们有没有看到熟悉的point定义，在上一章中，我们就说到point定义了一个点对象，之后会经常用的，marker为标注对象，他的作用你可以理解为告诉地图我要在该point上添加一个标记或标注，最后通过map.addOverlay()内置方法渲染到地图上。

当然，我们也可以通过循环批量添加标记

const list = [
{x:100,y:101},{x:101,y:101},{x:102,y:101},{x:103,y:101},
]
//这里的坐标是随便写的，并没有具体含义

list.map( ( value , index ) =>{
var point = new BMapGL.Point(value.x, value.y);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中
})
//熟练使用map，不要一直用for，for循环效率很低的，这里我使用了箭头函数，不懂的兄弟可以看看es6

之后呢，这里有一个小扩展，因为在地图时我们会经常用到标记和文本标注，

var opts = {
    position: point, // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(-100, 0) // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// 自定义文本标注样式
label.setStyle({
    color: 'blue',
    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    height: '30px',
    lineHeight: '30px',
    fontFamily: '微软雅黑'
});
map.addOverlay(label);

这段代码呢，是文本标注，因为标注和标记通常会一起使用，所以在这段代码中的各属性和之前创建标记点的代码可以同时使用，你可以这么理解，在同一个点对象上添加了两个覆盖物（一个是点、一个是文本），他们同时使用效果是这样的：

当然这个标记点的图标也是可以更改的，我们只需要把变量marker这样定义

var myIcon = new BMapGL.Icon("更换的图标路径", new BMapGL.Size(52, 26));
// 后一个属性是图标的大小
var marker = new BMapGL.Marker(point, {
    icon: myIcon
});

效果就不再展示了

多边形/圆覆盖物：

在我们项目中多边形覆盖物不太常用，所以这里不做过多介绍，这要知道它的定义方法就可以了，它的本质就是定义多个point点对象，然后以点画面。

圆覆盖物比较常用，它通常用来表示中心点到附近的半径，很有用的

var circle = new BMapGL.Circle(point, 1000, {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
//三个属性分别代表的意思是 边框blue，边框厚度2，可见区域的透明度0.5
// 1000代表的是半径1000m
map.addOverlay(circle);

绘制完成！

注意：圆也是有内置方法的通过enableEditing()方法可以开启圆的大小编辑，通过getRadius()可以返回此时圆的半径。

var circle = new BMapGL.Circle(point, 1000, {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
//三个属性分别代表的意思是 边框blue，边框厚度2，可见区域的透明度0.5
// 1000代表的是半径1000m
map.addOverlay(circle);
circle.enableEditing();//开启圆编辑
console.log(circle.getRadius())//查看圆的半径

这时候大家有没有想法呢，没错，我们可以通过监听圆大小的变化实时的获取他的半径。这个操作当时做的时候相当费力，因为外圈的那个可拖拽小方块可真是难找，普通方法根本找不到，不过！功夫不负有心人，通过坚持不懈的console.log 终于被我找到，由于这个小东西每次版本更新都会变，所以并不能保证它永远适用，不过现阶段，一定是OK的

target.vertexMarkers[0].addEventListener('dragend' , () =>{
   //圆心小方块  'dragend'停止拖拽后触发
})
target.vertexMarkers[1].addEventListener('dragend' , () =>{
//圆边缘小方块  'dragend'停止拖拽后触发
})

请各位大佬收下这两个小东西。

拿到了这两个小方框，在监听函数里写上相应代码，就可以实现实时显示半径了。因为点覆盖物东西实在太多，所以没办法，通篇都在讲述他，不过这些东西一定是有用的，也希望各位大佬多多指正，

哪里没看懂的欢迎评论区留言，有时间我会一一给大家解答，当然主要对于目前来说还不涉及很多逻辑处理和代码编写，之后随着我给大家对百度地图的深入讲解一定会有不明白的，或者您有什么瓶颈也可以评论告诉我，我帮您一起解决。

那么到这里（二）就结束了，（三）我会抽时间给大家编写发布的