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: 100%;
      text-align: center;
      z-index: 10;
      background-color: #fcf8e3;
    }
    .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
    });
    map.on('click', function (e) {
      let marker = BM.marker(e.latlng, {
        draggable: true
      }).addTo(map);
      let date = new Date().toLocaleString();
      marker.bindPopup(`我是${date}创建的标注`, {
          className:'popInfo'
      }).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();
      })
    })
  </script>
</body>

</html>