vue+百度地图实现海量点_vue 百度地图海量点

用海量点来展示多个坐标，实测2万个坐标点显示出来只有两三秒的延迟

代码示例

1.在显示地图的组件中 template 中(必须设置组件高跟宽):

<el-card id="allmap"  style="width:66.2%;height:2.5rem;margin-top: 0.1rem;" ></el-card>
1

2.在script 中

export default {
		name: "home",
	  	data() {
		    return {
		     };
		    	
	  	},
	  	mounted(){
			this.$nextTick(() => {
			 this.BaiduMap()
			})
			
	  	},
	  	methods:{
	  	//加载地图
        	BaiduMap() {
			    var that = this;
			      // 百度地图API功能
			    var map = new BMap.Map("allmap",{enableMapClick:true,minZoom:4});
			    var point=new BMap.Point(101.74,36.56)
			    map.disableDoubleClickZoom() 
			    map.centerAndZoom(point,5);    //中心点
				map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom();//可拖拽
				var pointt=new BMap.Point(this.qidian.lng,this.qidian.lat)
				var markerMap = new BMap.Marker(pointt);//标注中心点
			    map.addOverlay(markerMap);

			    // 定义一个控件类,即function
			    //在左上角加入地图的标题
				function ZoomControl(){
				  // 默认停靠位置和偏移量
				  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				  this.defaultOffset = new BMap.Size(15, 15);
				}
				// 通过JavaScript的prototype属性继承于BMap.Control
				ZoomControl.prototype = new BMap.Control();
				ZoomControl.prototype.initialize = function(map){
				  // 创建一个DOM元素
				  var div = document.createElement("div");
					var lents=that.shuju.length
				  	$(div).html(`<div style='padding:5px 0px;font-size:0.11rem;font-weight:700'>客户分布图</div>`);
				  map.getContainer().appendChild(div);
				  // 将DOM元素返回
				  return div;
				}
				// 创建控件
				var myZoomCtrl = new ZoomControl();
				// 添加到地图当中
				map.addControl(myZoomCtrl);



			    var opts = {
				  width : 200,     // 信息窗口宽度
				  borderRadius:20,
				  height:30
				}
				var infoWindow = new BMap.InfoWindow("公司所在地:"+this.qidian.name, opts);  // 创建信息窗口对象 
				markerMap.addEventListener("click", function(){          
					map.openInfoWindow(infoWindow,pointt); //开启信息窗口
				});
				this.$nextTick(() => {
				var points=[]
				//将点添加到数组中
				for(var i=0;i<that.shuju.length;i++){
					points.push(new BMap.Point(that.shuju[i].lng,that.shuju[i].lat))
				}
//				var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:points});
				var options = {
		            size: BMAP_POINT_SIZE_SMALL,
		            shape: BMAP_POINT_SHAPE_STAR,
		            color: '#d340c3'
		        }
        		var pointCollection = new BMap.PointCollection(points, options);  // 初始化	PointCollection
        		//添加到地图上
        		map.addOverlay(pointCollection)
        		
				//增加标注的点击事件，弹出点的信息
        		pointCollection.addEventListener('click', dituw);
				})
     			function dituw(e) {
        
        			var Name="";//名称
	          		for (var i = 0; i < that.shuju.length; i++) {
	
						if(that.shuju[i].lng==e.point.lng&&that.shuju[i].lat==e.point.lat){//经度==点击的,维度
							Name=that.shuju[i].name;
							ads=that.shuju[i].username;
							tel=that.shuju[i].userphone;
							break;
						}
					}
			          var point = new BMap.Point(e.point.lng, e.point.lat);
			          var opts = {
							width: 280, // 信息窗口宽度
							height: 30, // 信息窗口高度
							title:"", // 信息窗口标题
							enableMessage: false,//设置允许信息窗发送短息
							}
							var infowindow = new BMap.InfoWindow("客户名称:"+Name);
							map.openInfoWindow(infowindow, point);
									
			        }
			
						 
        	},
	  	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

备注

信息弹窗展示的信息越多，地图加载的越慢。