关于地图添加大量marker点进行卡顿问题

每天一个技术点

已于 2022-08-23 09:40:10 修改

阅读量2.2k

点赞数

分类专栏： js 文章标签： html5 javascript

于 2021-09-01 16:57:43 首次发布

本文链接：https://blog.csdn.net/llainannan/article/details/120043931

版权

百度地图API CanvasLayer 地图渲染 zrender 交互事件

关键词由CSDN通过智能技术生成

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

自己在百度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;
}