自己在百度api 调试界面 3.0 的进行调试就行 ,确实不卡顿。并且事件都有
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>CanvasLayer</title>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("container");
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);
mp.enableScrollWheelZoom();
var canvasLayer = new BMap.CanvasLayer({
update: update
});
function update() {
var ctx = this.canvas.getContext("2d");
if (!ctx) {
return;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var temp = {};
ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
ctx.beginPath();
var data = [
new BMap.Point(116.297047,39.979542),
new BMap.Point(116.321768,39.88748),
new BMap.Point(116.494243,39.956539)
];
for(var j = 0 ; j<100000;j++){
for (var i = 0, len = data.length; i < len; i++) {
var pixel = mp.pointToPixel(data[i]);
ctx.fillRect(pixel.x, pixel.y, 30, 30);
}
}
}
mp.addOverlay(canvasLayer);
</script>
这是用了CanvasLayer这个api 有不明白的搜 jsapi3类参考一看
下面是另一种方法 此方法也是用canvas 但是这个用的被封装过的,即zrender 可以自己下载使用
一点都不卡,
// option包含以下参数
// data:点的数组
// iconUrl:自定义点的图片路径
// matchingMethod: icon匹配方法
// click:点击事件(非必填)
// mousemove:移入事件(非必填)
// mouseout:移出事件(非必填)
function addMapPoint(map,option){
var zr = null;
var canvasLayer = new BMap.CanvasLayer({
update: update
});
var zoom = map.getZoom()
map.addOverlay(canvasLayer);
function update(){
zr = zrender.init(this.canvas); //初始化zrender
zr.resize()
option.data.forEach(item => {
var point = map.pointToPixel( new BMap.Point(Number(item.lng),Number(item.lat)));
var circle = new zrender.Image({
style: {
image: option.iconUrl?option.iconUrl:option.matchingMethod(item),
x: point.x - zoom,
y: point.y - zoom,
width: zoom*2,
height: zoom*2
},
data:item,
});
if(option.click){
circle.on('click',option.click)
}
if(option.mousemove){
circle.on('mousemove',option.mousemove)
}
if(option.mouseout){
circle.on('mouseout',option.mouseout)
}
zr.add(circle);
})
}
return canvasLayer;
}