欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间:2024/9/30 编程问答 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 关于地图添加大量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点进行卡顿问题的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。