百度地图自定义弹窗infoBox

一个打工仔的笔记

已于 2023-12-27 14:44:12 修改

阅读量1.8k

点赞数

文章标签： swift 开发语言 ios

于 2023-08-03 15:04:55 首次发布

本文链接：https://blog.csdn.net/web_notes/article/details/132082398

版权

本文介绍了如何在HTML中引入InfoBox库，并在BMapGL地图上实现信息弹窗功能，包括初始化地图、添加标记和定制Infobox的显示内容。

摘要由CSDN通过智能技术生成

infoBox文档地址： https://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html

infobox依赖文件可以到这里下载：https://gitee.com/shiguangliangyi/dependent-file/blob/00d37b1ba2ffbbfd309305449711b4e7378878b5/infobox.js

1.引入
index.html

<script type="text/javascript" src="../js/InfoBox.min.js"></script

2.使用

   //初始化地图
    initMap() {
      let self = this;
      var map = new BMapGL.Map("map"); // 创建Map实例
      map.centerAndZoom(
        new BMapGL.Point(self.center.lng, self.center.lat),
        self.zoom
      ); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.setMapType(BMAP_NORMAL_MAP);
      self.map = map;
      window.map = map;
      self.map.addEventListener("zoomend", zoomEvent);//监听地图缩放事件
      self.map.setMapStyleV2({
        styleJson: [
          {
            featureType: "poilabel",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "manmade",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "building",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
        ],
      });
 
 
    },

	//添加图片覆盖物
    markerClick(node) {
        let point = new BMapGL.Point(node.lng, node.lat);
        var myIcon = new BMapGL.Icon(
          "/img/point.png",
          new BMapGL.Size(25, 25),
          {
            anchor: new BMapGL.Size(25, 25),
          }
        );
        // 创建标注对象并添加到地图
        var marker = new BMapGL.Marker(point, { icon: myIcon });
        this.map.addOverlay(marker);
        let obj = {
          item: item,
          lng: lng,
          lat: lat,
        };
        //覆盖物绑定点击事件，打开弹窗
        marker.addEventListener("click", (e) => {
          this.pointClick(obj);//点击事件传参，打开弹窗
        });
      
    },
    //重点 infobox的使用
   async pointClick(node) {
      //  infox弹窗
      let strHtml = `<div class="content bor1"  style="width:200px">
      <div class='infoBox_content_title'>{{title}}</div>
      <div class='infoBox_content_row'>今日上班人数：{{attNum}}</div>
      <div class='infoBox_content_row'>备注信息：{{note}}</div>
      </div>`;
      let res = await getOperPointInfo(node.item.id);//查詢事件
      strHtml = strHtml.replace("{{title}}", node.item.name);
      strHtml = strHtml.replace("{{attNum}}", res.data.attNum);
      strHtml = strHtml.replace("{{note}}", res.data.note);
      var infoBox = new BMapLib.InfoBox(this.map, strHtml, {
        closeIconMargin: "0px 10px 0 0",
        closeIconUrl: "/img/close.png",//关闭图标的图片路径
        closeIconWidth: "16px",
        offset: new BMapGL.Size(0, 30),//infobox偏移量
        enableAutoPan: true,//自动偏移
      });
      this.oldInfoBox && this.oldInfoBox.close();//如果有别的弹窗先关闭
      let point = new BMapGL.Point(node.lng, node.lat);//打开的坐标点
      infoBox.open(point);
      this.oldInfoBox=infoBox 
    },