BIGEMPA Js API示例中心
覆盖物事件支持源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--
        以下CSS地址请在安装软件了替换成本地的地址
        CSS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
    -->
    <link
      href="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css"
      rel="stylesheet"
    />
    <!--
        JS地址请使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .info {
        position: absolute;
        top: 22px;
        width: 200px;
        padding: 20px 0;
        text-align: center;
        z-index: 10;
        background-color: #ffffff;
        right: 100px;
      }
      .popInfo {
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <p class="info">
      <a href="http://www.bigemap.com/offlinemaps/api/#interactive-layer"
        >事件支持对应配置文档</a
      >
    </p>
    <script>
      BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
      var map = BM.map("map", "bigemap.amap-satellite", {
        center: [30.4, 104.5],
        zoom: 7,
        zoomControl: true,
        attributionControl: false,
      });
      markerEvent();
      polygonEvent();
      map.on("click", (e) => {
        console.log(e._latlng);
      });
      var date = new Date().toLocaleString();

      //   Popup相关文档
      // http://www.bigemap.com/offlinemaps/api/#popup

      function markerEvent() {
        // marker文档
        // http://www.bigemap.com/offlinemaps/api/#marker

        var marker = BM.marker([30.4, 104.5], {
          draggable: true,
        }).addTo(map);

        marker
          .bindPopup(`我是${date}创建的标注`, {
            className: "popInfo", //要分配给弹出窗口的自定义CSS类名称
            autoClose: false, // 将它设置为false，如果你想另一个弹出打开时覆盖弹出关闭的默认行为。
            // closeOnClick:false //如果要在用户单击地图时覆盖弹出窗口关闭的默认行为，请设置它。
          })
          .openPopup();
        marker.on("dragstart", function (e) {
          marker
            .setPopupContent(
              `<div>
            <p>现在我被拖动啦</p>
            <p>从${e.target._latlng}离开</p>
          </div>`
            )
            .openPopup();
        });
        marker.on("dragend", function (e) {
          marker
            .setPopupContent(
              `<div>
            <p>现在我停下啦</p>
            <p>到${e.target._latlng}结束</p>
          </div>`
            )
            .openPopup();
        });
        marker.on("click", function (e) {
          marker
            .setPopupContent(
              `<div>
            <p>点我干什么,又不会换人</p>
          </div>`
            )
            .openPopup();
        });
        marker.on("contextmenu", function (e) {

            //更换标记的图表
          marker.setIcon(
            BM.icon({
              iconUrl: `	http://www.bigemap.com/mapoffline/marker/${Math.ceil(
                Math.random() * 15
              )}.png`,
              iconSize: [25, 40],
              iconAnchor: [12.5, 40],
            })
          );

          //获取弹窗框 并单独设置位置 
          marker.getPopup().options.offset = [0, -20];
          marker
            .setPopupContent(
              `<div>
            <p>只是展示一下其他的样式啦</p>
            <p>我还是之前那个我</p>
          </div>`
            )
            .openPopup()
            .update();
        });
      }

      function polygonEvent() {

        // 多边形对应文档
        // http://www.bigemap.com/offlinemaps/api/#polygon


        var gonlatlng = [
          { lat: 29.746104751913656, lng: 106.30111828870956 },
          { lat: 29.993744378566525, lng: 108.49786693488791 },
          { lat: 28.57596707920455, lng: 109.01410286673985 },
        ];
        var gon = BM.polygon(gonlatlng).addTo(map);

        gon
          .bindPopup(`我是${date}创建的多边形`, {
            className: "popInfo", //要分配给弹出窗口的自定义CSS类名称
            autoClose: false, // 将它设置为false，如果你想另一个弹出打开时覆盖弹出关闭的默认行为。
            // closeOnClick:false //如果要在用户单击地图时覆盖弹出窗口关闭的默认行为，请设置它。
          })
          .openPopup();

        gon.on("click", function (e) {
          gon
            .setPopupContent(
              `<div>
            <p>点我干什么,又不会换人</p>
          </div>`
            )
            .openPopup();
        });
        gon.on("contextmenu", function (e) {
          gon.getPopup().options.offset = [0, -20];
          gon
            .setPopupContent(
              `<div>
            <p>只是展示一下其他的样式啦</p>
            <p>我还是之前那个我</p>
          </div>`
            )
            .openPopup();
        });
      }
    </script>
  </body>
</html>