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.xawiki.com/reader/download/detail201802017.html
    -->
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    <!--
        JS地址請使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="http://ua.bigemap.com:30081/bmsdk/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.xawiki.com/offlinemaps/api/#interactive-layer"
        >事件支持對應配置文檔</a
      >
    </p>
    <script>
      BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
      var map = BM.map("map", "bigemap.dc-satellite", {
        crs: BM.CRS.EPSG4326,
        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().toString();

      //   Popup相關文檔
      // http://www.xawiki.com/offlinemaps/api/#popup

      function markerEvent() {
        // marker文檔
        // http://www.xawiki.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.xawiki.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.xawiki.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>