百度地图-手动JS触发自定义Marker覆盖物点击事件

最新推荐文章于 2024-05-29 16:53:04 发布

栀蒽coding_

最新推荐文章于 2024-05-29 16:53:04 发布

阅读量4.1k

点赞数 4

分类专栏：百度地图文章标签：前端百度

本文链接：https://blog.csdn.net/zengdaping/article/details/123481511

版权

百度地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

百度地图-手动JS触发自定义Marker覆盖物点击事件

文章目录

前言
一、问题描述及解决方案
总结

前言

文章主要解决百度地图的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.map.baidu.com/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>