BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
以下CSS地址請在安裝軟件了替換成本地的地址
CSS地址請使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
軟件下載地址 http://www.euxamster.com/reader/download/detail201802017.html
-->
<link
href="http://www.euxamster.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.euxamster.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
<script
type="text/javascript"
src="http://www.euxamster.com/mapoffline/canvas-layer/canvas-layer.js"
></script>
<link
href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.tool {
position: absolute;
z-index: 10;
right: 10px;
top: 40px;
}
.tips {
position: absolute;
z-index: 1;
background-color: white;
padding: 20px;
top: 150px;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<title>Baidu Map</title>
</head>
<body>
<div id="map"></div>
<div class="tips">
文檔地址： <a href="http://www.euxamster.com/mapoffline/canvas-layer/doc/global.html">http://www.euxamster.com/mapoffline/canvas-layer/doc/global.html</a>
<br>
<br>
插件js下載地址 <a href="http://www.euxamster.com/mapoffline/canvas-layer/canvas-layer.js">http://www.euxamster.com/mapoffline/canvas-layer/canvas-layer.js</a>
</div>
<p class="tool">
<button
onclick="showF()"
class="button button-tiny button-rounded button-primary"
href="javascript:void (0);"
>
標記顯示
</button>
<button
onclick="hideF()"
class="button button-tiny button-rounded button-primary"
href="javascript:void (0);"
>
標記隱藏
</button>
<button
onclick="clearLayers()"
class="button button-tiny button-rounded button-primary"
href="javascript:void (0);"
>
清除標記
</button>
</p>
<script>
// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = "http://www.euxamster.com:9000";
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.baidu-map，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
var map = BM.map("map", "bigemap.amap-map", {
center: [39.905963, 116.390813],
zoom: 11,
zoomControl: true,
attributionControl: false,
});
// 文檔地址 http://www.euxamster.com/mapoffline/canvas-layer/doc/global.html
//注意！！ 只需要初始化一次 利用返回的對象接受 刪除數據即可
var layer = new BM.CanvasMarkerLayer({
drawTooltip: true,
minZoom: 0,
font: "12px Helvetica Neue",
fillStyle: "#369",
});
layer.addTo(map);
//注意??！ 需要使用自定義圖標進行繪制 默認圖標不生效！
var icon = BM.icon({
iconUrl: "http://www.euxamster.com/mapoffline/marker/11.png",
iconSize: [30, 30],
iconAnchor: [15, 30],
});
var mm = [];
var line_arr = [];
for (var i = 0; i < 10000; i++) {
var lat = 39.905963 + (Math.random() - Math.random()) * 3;
var lng = 116.390813 + (Math.random() - Math.random()) * 3;
var marker;
if (i % 20 == 0) {
if (line_arr.length == 2) {
//BM.polyline(line_arr, { color: "red" }).addTo(map);
line_arr.length = 0;
}
line_arr.push([lat, lng]);
}
var marker;
marker = BM.marker([lat, lng], {icon: icon})
.bindTooltip("tooltip" + i)
.bindPopup("I Am " + i); //綁定氣泡窗口
//定義自定義內容
marker.id = i;
//添加到數組里 生成marker后 統一 添加
mm.push(marker);
}
//批量添加 數組格式
layer.addLayers(mm);
//單個增加 數量多的話 會影響效率 建議數組方式添加
// layer.addLayer(BM.marker([30,104],{icon:icon}));
//右鍵事件
layer.addOnContextMenuListener(function (e, l) {
//e.layer 標記對象
layer.removeLayer(e.layer);
});
//鼠標移入事件
layer.addOnHoverListener(function (e) {
console.log(e.layer);
});
//鼠標點擊事件
layer.addOnClickListener(function (e) {
console.log(e.layer);
alert(e.layer.id)
});
function showF() {
layer.addTo(map)
}
function hideF() {
layer.remove()
}
function clearLayers() {
//清楚所有
layer.clearLayers()
//清楚單個layer
// layer.removeLayer(marker)
}
</script>
</body>
</html>