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>