百度地图-手动JS触发自定义Marker覆盖物点击事件
文章目录
前言一、问题描述及解决方案1. 问题描述2. 解决步骤3. 注意事项总结前言
文章主要解决百度地图的Marker覆盖物添加单击事件后，如何手动在js里触发click事件。
一、问题描述及解决方案
1. 问题描述
项目接入百度地图后，添加Marker覆盖，并为覆盖物添加单击事件，除了点击覆盖物能触发事件，也可以通过点击其他按钮手动JS触发click事件。
2. 解决步骤
渲染地图添加Marker覆盖物，给Marker点添加唯一id标识，挂载点击事件手动js触发代码如下（示例）：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>百度地图JS触发点击事件</title><script type="text/javascript" src="http://api./api?v=2.0&ak=你的百度地图AK"></script><script type="text/javascript" src="./jquery-1.8.3.min.js"></script><style>.operate-btn {cursor: pointer;border: none;background-color: #1191fd;color: #fff;height: 30px;line-height: 30px;margin: 5px 5px 5px 0;}</style></head><body><!--原始数据可行驶轨迹--><div id="mapId" style="height: 800px;width: 1200px;"></div><div><button class="operate-btn" type="button" onclick="drawMarker()"> 渲染图标 </button><button class="operate-btn" type="button" onclick="triggerClick()"> 触发点击事件 </button></div><script>var mapMain = new BMap.Map("mapId");mapMain.enableScrollWheelZoom(); // 开启鼠标滚轮缩放mapMain.addControl(new BMap.ScaleControl()); // 添加比例尺控件var pointMarker = new BMap.Point(112.9104, 28.197967)mapMain.centerAndZoom(pointMarker, 13);var PointArr = [];PointArr.push({'lng': 112.9104, 'lat': 112.9104});//可以根据数组来提供视图//mapMain.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野var carMk;//先将终点坐标展示的mark对象定义//小车行驶图标 - 图标URL来自本地,替换为你的image地址var drivingPoint = new BMap.Icon('../asset/ambu-red2.png', new BMap.Size(60,60), {anchor : new BMap.Size(30, 30),imageSize:new BMap.Size(60,60)});/**** 添加起始图标* @param point坐标点* */function addStartMarker(point) {// 创建标注carMk = new BMap.Marker(point, {icon:drivingPoint} ); carMk.id = 1001;//点击事件对应的函数设置到marker对象上carMk.clickEvent = function(type) {if(type == 1){//点击图标触发console.log(`type:${type}点击图标触发 - 车辆图标点击事件`);}if(type == 2){//点击其它按钮触发console.log(`type:${type}点击其它按钮触发 - 车辆图标点击事件`);}}carMk.addEventListener("click", function(){carMk.clickEvent(1)});mapMain.addOverlay(carMk); }/**** 渲染图标* */function drawMarker() {addStartMarker(pointMarker);}/**** 触发点击事件* */function triggerClick() {//获取所有marker覆盖物var markerArr = mapMain.getOverlays();for(var i = 0; i < markerArr.length; i++){if(markerArr[i].id == 1001){markerArr[i].clickEvent(2);}}}</script></body></html>
3. 注意事项
替换百度地图AK;替换引入JQuery地址;替换图标为本地image地址总结
手动JS触发Marker图标点击事件，主要是给Marker添加唯一标识，把click事件挂载在Marker上，手动JS触发的时候查找该地图所有覆盖物，根据id找到所需要触发的Marker的单击事件。
