Canvas API方案
百度地图API v3中提供了基于Canvas API的接口，我们可以把这些“好看”的覆盖物绘制到一个层上面去，显然这种方式会比DOM更高效
代码如下：
<!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="http://api.map.baidu.com/api?v=3.0&ak=Zdr818v0IP2c4CRrdIqsRNi4""></script>
<style type="text/css">
body, html,#container { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);
map.enableScrollWheelZoom();
//100000个点单独绘制没有问题
//基于Canvas的点击判断会引发大量计算
var MAX = 10000;
var data = [];
for (i=0; i < MAX; i++) {
data.push(new BMap.Point(Math.random() * 50 + 85, Math.random() * 30 + 21));
}
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);
ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
//绘制图片
var img = new Image();
img.onload = function(){
for (var i = 0, len = data.length; i < len; i++) {
var pixel = map.pointToPixel(data[i]);
ctx.drawImage(img, pixel.x, pixel.y, 16, 39.12);
ctx.add
}
};
img.src = "https://static.igeekee.cn/scenelogo/e5eee11aea3018b3ea7f4a18cff5469a.jpg";
//绑定单击事件
var self = this;
self.canvas.onclick = function(e){
var x= e.layerX;
var y= e.layerY;
console.log(x,y);
//var x = e.pageX - self.canvas.getBoundingClientRect().left;
//var y = e.pageY - self.canvas.getBoundingClientRect().top;
for(var i = 0; i < data.length; i++){
var pixel = map.pointToPixel(data[i]);
ctx.rect(pixel.x, pixel.y, 16, 39.12);
if(ctx.isPointInPath(x,y)){
alert('当前点击的点是：(' + data[i].lng + "," + data[i].lat + ")");
break;
}
}
};
}
map.addOverlay(canvasLayer);
</script>