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://m.bjxdny.cn/reader/download/detail201802017.html
-->
<link
href="http://m.bjxdny.cn:9000/bigemap.js/v2.1.0/bigemap.css"
rel="stylesheet"
/>
<!--
JS地址請使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
-->
<script src="http://m.bjxdny.cn: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://m.bjxdny.cn/offlinemaps/api/#interactive-layer"
>事件支持對應配置文檔</a
>
</p>
<script>
BM.Config.HTTP_URL = "http://m.bjxdny.cn:9000";
var map = BM.map("map", "bigemap.zhongkexingtu", {
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://m.bjxdny.cn/offlinemaps/api/#popup
function markerEvent() {
// marker文檔
// http://m.bjxdny.cn/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://m.bjxdny.cn/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://m.bjxdny.cn/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>