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.cyttt.cn/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.cyttt.cn/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.cyttt.cn/offlinemaps/api/#popup
function markerEvent() {
// marker文档
// http://www.cyttt.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://www.cyttt.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://www.cyttt.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>