百度地图自定义弹框、标注

最新推荐文章于 2025-07-13 16:48:00 发布
原创最新推荐文章于 2025-07-13 16:48:00 发布 · 5.1k 阅读
4 ·
CC 4.0 BY-SA版权
地图专栏收录该内容
1 篇文章
订阅专栏
本文介绍如何在百度地图上实现自定义的弹框和标注，包括如何替换标注图片，以个性化展示地图信息。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
自定义地图显示内容（百度地图）、标注图片可以自己替换一下
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=Op2yKY94G2Mv6hhjcF1xXF99UHbwzbF5">
    </script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
   #map_box{
       width: 100%;
       height: 800px;
   }
    </style>
</head>

<body>
<div id="map_box">

</div>
   
</body>
<script>
    let mapdata= [
        {
          point: [116.401394,39.914492],
          CLL: "147",
          JCXXZC: "127",
          JCXXBZC: "20",
          HYCCFZS: "35",
          HYCYCH: "30",
          HYCWCF: "5",
          CBCL: "50",
          type: true
        },
        {
          point: [116.43244,39.910508],
          CLL: "247",
          JCXXZC: "226",
          JCXXBZC: "21",
          HYCCFZS: "45",
          HYCYCH: "35",
          HYCWCF: "10",
          CBCL: "40",
          type: false
        }
      ]
let map = new BMap.Map("map_box", { enableMapClick: false }); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.401394,39.914492), 14); // 初始化地图,设置中心点坐标和地图级别
    map.setMapStyle({
      styleJson: [
        {
          featureType: "poilabel",
          elementType: "all",
          stylers: {
            visibility: "off"
          }
        }
      ]
    });
    //添加地图类型控件
    map.addControl(
      new BMap.MapTypeControl({
        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
      })
    );
    map.setZoom(14);
    map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

    let that = this;
    let cityId = null;
    // 复杂的自定义覆盖物
    //参数 point 坐标 , backImg 图片,oneparameter 周边设备数,twoparameter 上网人数 ,threeparameter 车牌号码 ,fourparameter 设备MAC,fiveparameter 时间
    function ComplexCustomOverlay(point, backImg, num, mapdata, backImg2) {
      this._point = point;
      this._backImg = backImg;
      this._backImg2 = backImg2;
      this._num = num;
      this._mapdata = mapdata;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map) {
      console.log($("#divwer")[0]);
      this._map = map;
      let div = (this._div = document.createElement("div"));
      console.log(this._point.lat);
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      console.log(this._backImg);
      if (this._mapdata.type) {
        div.style.background =
          "url('" + this._backImg + "') no-repeat center center";
      } else {
        div.style.background =
          "url('" + this._backImg2 + "') no-repeat center center";
      }

      div.style.MozUserSelect = "none";
      div.style.zIndex = 99;
      // div.setAttribute("className","abc");
      $(div).css({
        position: "absolute",
        "z-index": this._num,
        cursor: "pointer",
        height: "30",
        width: "30",
        margin: "0",
        padding: "0",
        color: "#fff",
        "font-size": "14px"
      });
      $(div).attr({ num: this._num, class: "pointD" });
      //  滑过显示盒子
      let onediv = document.createElement("div");
      $(onediv).css({
        height: "30",
        width: "30",
        "white-space": "nowrap",
        margin: "0",
        padding: "0",
        color: "#fff",
        //background:"red",
        "text-align": "center",
        "line-height": "30px"
      });
      //onediv.innerHTML = this._num;
      $(div)
        .append(`<div class="disNCz" style="display:none; position:absolute;padding:10px;left: -160px; top: -214px;  width: 320px;height:200px;z-index: 3; ">
    <div style="width:320px;height: 200px;border: 2px solid #5eb5f8;border-radius: 7px;background-color: #fff">
      <div
        style="line-height:45px;overflow: hidden;text-align: center;background: #5eb5f8;font-weight: 700;font-size: 14px;">
        <a style="color:#fff;text-decoration: none;" onmouseover="this.style.fontSize='15px';"
          onmouseout="this.style.fontSize='14px';" onclick="reset_map('PointManagement')">标题</a></div>
      <div style="line-height:25px;padding:5px 20px 5px 45px;position: relative;"><a
          style="color: #000;text-decoration: none;" onmouseover="this.style.color='#5eb5f8';"
          onmouseout="this.style.color='#000';" onclick="reset_map('TrafficFlowMonitoringStatistics')"><span style="position: absolute;left:11px;font-size: 25px;"
            class="icon-liuliang"></span>标题一：${
              this._mapdata.CLL
            }辆/h</a></div>
      <div style="line-height:25px;padding:5px 20px 5px 45px;position: relative;"><a
          style="color: #000;text-decoration: none;" onmouseover="this.style.color='#5eb5f8';"
          onmouseout="this.style.color='#000';" onclick="reset_map('ExhaustTelemetryManagement')"><span style="position: absolute;left:11px;font-size: 25px;"
            class="icon-jiance"></span>标题二${
              this._mapdata.JCXXZC
            }辆,不合格车辆${this._mapdata.JCXXBZC}辆</a></div>
      <div style="line-height:25px;"></div>
      <div style="line-height:25px;padding:5px 20px 5px 45px;position: relative;"><a
          style="color: #000;text-decoration: none;" onmouseover="this.style.color='#5eb5f8';"
          onmouseout="this.style.color='#000';" onclick="reset_map('SmokyCarManagement')"><span style="position: absolute;left:11px;font-size: 25px;"
            class="icon-cheliangxinxi"></span>标题三${
              this._mapdata.HYCCFZS
            }去${this._mapdata.HYCYCF} 去${
        this._mapdata.HYCWCF
      }辆</a></div>
      <div style="line-height:25px;"></div>
    </div>
  </div>`);
      $(div)
        .append(`<div class="zhuzhuangtu" style=" width: 90px; height: 50px; display: flex;align-items: flex-end;position:absolute;z-index: 1;color: #fff;font-size: 10px;text-align: center;left: -32px; top: -50px;">
        <div style="width: 30px;height: ${Math.floor(
          this._mapdata.CLL / 3
        )}px;background-color: #5b9bd5;">${this._mapdata.CLL}</div>
        <div style="width: 30px;height: ${Math.floor(
          this._mapdata.CBCL / 3
        )}px;background-color: #ed7d31;">${Math.floor(this._mapdata.CBCL)}</div>
        <div style="width: 30px;height: ${Math.floor(
          this._mapdata.HYCCFZS / 3
        )}px;background-color: #ffc000;">${Math.floor(
        this._mapdata.HYCCFZS
      )}</div>
    </div>`);
      div.appendChild(onediv);
      //  滑到显示
      $(div).mousemove(function() {
        $(this).css("z-index", "999999");
        $(this)
          .children(".disNCz")
          .css("display", "block");
      });
      //  滑过隐藏
      $(div).mouseout(function() {
        $(this).css("z-index", $(this).attr("num"));
        $(this)
          .children(".disNCz")
          .css("display", "none");
      });
      map.getPanes().labelPane.appendChild(div);
      map.addEventListener("zoomend", function(div) {
        var ZoomNum = map.getZoom();
        if (ZoomNum < 14) {
          $(".zhuzhuangtu").css("display", "none");
        } else {
          $(".zhuzhuangtu").css("display", "flex");
        }
        //console.log(ZoomNum);
      });
      return div;
    };
    ComplexCustomOverlay.prototype.draw = function() {
      let map = this._map;
      let pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - 15 + "px";
      this._div.style.top = pixel.y - 15 + "px";
    };

    // 把定位点添加到地图中
    let o = 1;
    let timeOut = null;
    function posiPoint() {
      let backImg = "image/xinhao.png";
      let backImg2 = "image/red.gif";
      let pointd = new BMap.Point(
        mapdata[o - 1].point[0],
        mapdata[o - 1].point[1]
      );
      //console.log(that.mapdata[o - 1].point[0], that.mapdata[o - 1].point[1]);
      let myCompOverlayveh = new ComplexCustomOverlay(
        pointd,
        backImg,
        o,
        mapdata[o - 1],
        backImg2
      );
      map.addOverlay(myCompOverlayveh);
      o++;
      if (o - 1 < mapdata.length) {
        timeOut = setTimeout(posiPoint, 500);
      }
    }
    posiPoint();
</script>

</html>