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.cyttt.cn/reader/download/detail201802017.html
-->
<link
href="http://www.cyttt.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://www.cyttt.cn:9000/bigemap.js/v2.1.0/bigemap.js"></script>
<script
type="text/javascript"
src="http://www.cyttt.cn/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.cyttt.cn/mapoffline/canvas-layer/doc/global.html">http://www.cyttt.cn/mapoffline/canvas-layer/doc/global.html</a>
<br>
<br>
插件js下载地址 <a href="http://www.cyttt.cn/mapoffline/canvas-layer/canvas-layer.js">http://www.cyttt.cn/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.cyttt.cn: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.cyttt.cn/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.cyttt.cn/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>