百度地图API踩坑（三）

2024-04-05 09:14:42

在上一篇文章中，介绍了一点覆盖物的基础使用，里面比较新奇的就是可编辑圆覆盖物的两个小方块的位置，在上篇文章最后有写，需要的自取，里面target大家应该知道是什么吧，是e.target，我缩写了一下，别再问我e是什么，这个要是不知道就过分了，哈哈哈哈哈。

好了，接下来我们来补充一下覆盖物的几种监听事件，个人认为这个还是挺重要的。

还有一点，这些是Javascript API GL的事件触发噢

1.地图常用事件触发参数

map.addEventListener('click',() =>{
  //单击触发事件代码
})
map.addEventListener('dblclick',() =>{
  //双击触发事件代码
})
map.addEventListener('rightclick',() =>{
  //右键单击触发事件代码
})
map.addEventListener('rightdblclick',() =>{
  //右键双击触发事件代码
})
map.addEventListener('mousemove',() =>{
  //鼠标在地图中移动触发事件代码
})
map.addEventListener('mouseover',() =>{
  //鼠标移入触发事件代码
})
map.addEventListener('mouseout',() =>{
  //鼠标移出触发事件代码
})

2.覆盖物常用事件参数（1中参数都可使用）

point.addEventListener('dragstart',() =>{
  //拖拽开始触发事件代码
})
point.addEventListener('dragend',() =>{
  //拖拽结束触发事件代码
})
point.addEventListener('draging',() =>{
  //拖拽中触发事件代码
//这个参数在我测试中并不会触发，不知道是什么原因
})
circle.addEventListener('lineupdate',() =>{
 //大小或位置更新时触发事件代码
})

//point和circle表示的是用map构造函数创建的覆盖物对象

开发过程中这些事件监听参数还是经常用到的，而且有些参数在官方类参考里，并没有体现，所以在这里我总结一下，希望对大家有帮助。还有一些没有提到的之后我会做一个单独的文章来把所有可能会用到的事件触发参数列出来（疯狂挖坑，哈哈哈哈哈）

之后还有什么呢，对！还有覆盖物的点击事件，在地图中我们通常都会点击某一个地点，然后会弹出来关于该地点的各种信息，那么这个点击出弹窗的要怎么写呢，百度地图API给了我们一个内置的方法

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.925);
map.centerAndZoom(point, 15);
// 创建点标记
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {
    width: 200,
    height: 100,
    title: '故宫博物院'
};
//弹窗属性
var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
//定义信息弹窗对象
// 点标记添加点击事件
marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point); // 开启信息窗口（表示在point位置打开弹窗）
});

调用该方法便可以解决大部分的点击蹦出信息窗口的事件，目前支持js直接定义弹窗的属性还是比较少的所以我们需要知道第二种定义方式，也是比较简单的，一句话，信息弹窗支持html标签内嵌。

var sContent = `<h4 style='margin:0 0 5px 0;'>*</h4>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
    *坐落在中国北京市中心,故宫的南侧,与*广场隔长安街相望,是清朝皇城的大门...
    </p></div>`;

// ``用该符号组定义字符串 ，比''好用

var infoWindow = new BMapGL.InfoWindow(sContent);

这样我们就可以以自己的方式定义信息弹窗，也可以不写内联样式换成class，总之你怎么乐意怎么来。好了，这样覆盖物就没什么内容了，这一章比较短，主要目的是为了补充上一篇文章中没有提到，但是比较实用的部分。

那么，其实百度地图API的大部分东西已经是这些，还有一些琐碎的小功能，我会在下一篇文章（四）中整个的做一个汇总，然后之后的文章我会给大家介绍并展示一下我自己开发的一些地图小功能，到时候为了方便大家阅读，我会用原生js来写，各位大佬可以跨过。

码农公寓

相关文章