用海量点来展示多个坐标,实测2万个坐标点显示出来只有两三秒的延迟
代码示例
1.在显示地图的组件中 template 中(必须设置组件高跟宽):
<el-card id="allmap" style="width:66.2%;height:2.5rem;margin-top: 0.1rem;" ></el-card>
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);
}
},
}
备注
信息弹窗展示的信息越多,地图加载的越慢。