关于地图添加大量marker点进行卡顿问题
生活随笔
收集整理的這篇文章主要介紹了
关于地图添加大量marker点进行卡顿问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自己在百度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類參考一看
總結
以上是生活随笔為你收集整理的关于地图添加大量marker点进行卡顿问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 几句话总结21种设计模式。
- 下一篇： 关于springBoot post请求参