需求:选中该表格行,在地图上显示该行地理位置信息
需求.png
实现多选效果非常简单,手动添加一个el-table-column，设type属性为selection即可；
<el-table-column type="selection"></el-table-column>
那要实现一个单选效果呢?思路:选中数量>1的时候进行清空选中效果,使用pop()方法去掉数组最后一个元素,然后在数组不等于0的情况下调用地图初始化组件,使用vuex或者父传子的方法给子组件
用到了element-ui中的这个属性@selection-change="handleSelectionChange"和定义一个ref
<el-table :data="scancodelist" height="250" style="width: 100%"
highlight-current-row
@selection-change="handleSelectionChange"
ref="multipleTable" >
<el-table-column type="selection"></el-table-column>
</el-table>
在methods方法集中使用
//默认只允许选一个,当选择项发生改变时触发该事件
handleSelectionChange(val){
console.log(val)
if(val.length>1){
this.$refs.multipleTable.clearSelection();//大于1,清除选中效果
this.$refs.multipleTable.toggleRowSelection(val.pop())//移除下一个元素
if(val.length!==0){
this.$store.commit('SET_code0',val)//传入数组经纬度
this.$refs.communitymap.initMap()//地图初始化
}
}else{
this.multipleSelection=val.pop()//如果大于length>1则移除下一个元素
}
},
地图组件接收数据并渲染
initMap() {
loadBMap("你的Ak值")
.then(() => {
// 百度地图API功能
var map = new BMap.Map(this.mapId, { minZoom: 5, maxZoom: 19 }); // 创建Map实例
// var point = new BMap.Point(this.setLng, this.setLat); // 设置中心点坐标
map.centerAndZoom(this.maplookcity, 13); // 地图级别 && 设置中心点坐标
//添加地图类型控件
map.addControl(
new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
})
);
map.setCurrentCity(this.maplookcity); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//---------------------------创建自定义标注-------------------------------------------------
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, width, height, color, radius) {
this._center = center;
this._width = width;
this._height = height;
this._color = color;
this._borderRadius = radius;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map) {
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._width + "px";
div.style.height = this._height + "px";
div.style.background = this._color;
div.style.borderRadius = this._borderRadius;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;
};
// 实现绘制方法
SquareOverlay.prototype.draw = function() {
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._width / 2 + "px";
this._div.style.top = position.y - this._height / 2 + "px";
};
//给自定义覆盖物添加鼠标移入移出事件
SquareOverlay.prototype.addEventListener = function(event, fun) {
this._div.style.cursor = "pointer";
this._div["mouseover" + event] = fun;
};
SquareOverlay.prototype.addEventListener = function(event, fun) {
this._div.style.cursor = "default";
this._div["mouseout" + event] = fun;
};
//给自定义覆盖物添加鼠标点击事件
SquareOverlay.prototype.addEventListener = function(event, fun) {
this._div["on" + event] = fun;
};
//-----------------------------------------------------------------------------------------------
//----------封装一个创建并渲染加监听事件的方法(创造作用域,防止添加信息窗口时只能显示最后一个)------------
function createMySquare(point, infoWindow, color) {
var mySquare = new SquareOverlay(point, 10, 10, color, "50%");
map.addOverlay(mySquare);
mySquare.addEventListener("mouseover", function(e) {
map.openInfoWindow(infoWindow, point);
});
mySquare.addEventListener("mouseout", function(e) {
map.closeInfoWindow(infoWindow);
});
}
//---------------------------------------------------------------------------------------------------------
var points = [];
var data0 = this.code0;
//循环添加标注到地图中
//------------添加code0(红点)------------------------------
console.log(data0)
for (var i = 0; i < this.code0.length; i++) {
console.log(i)
console.log(this.code0[i])
// var point0 = new BMap.Point(
// this.code0[i].longitude,
// this.code0[i].latitude
// );
points.push(new BMap.Point(this.code0[i].longitude,this.code0[i].latitude));
}
var options = {
shape: BMAP_POINT_SHAPE_CIRCLE,
size: BMAP_POINT_SIZE_SMALL,
color: "red"
};
var pointCollection = new BMap.PointCollection(points, options);
pointCollection.addEventListener("click", function(e) {
// alert("单击点的坐标为：" + e.point.lng + "," + e.point.lat); // 监听点击事件
for (var i = 0; i < data0.length - 1; i++) {
if (
data0[i].longitude == e.point.lng &&
data0[i].latitude == e.point.lat
) {
var opts = {
width: 150, // 信息窗口宽度
height: 100, // 信息窗口高度
title: data0[i].district // 信息窗口标题
};
var infopoint0 = new BMap.Point(
data0[i].longitude,
data0[i].latitude
);
var infoWindow = new BMap.InfoWindow('红点',opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, infopoint0); //开启信息窗口
}
}
});
pointCollection.addEventListener("mouseout", function(e) {
// alert("单击点的坐标为：" + e.point.lng + "," + e.point.lat); // 监听点击事件
for (var i = 0; i < data0.length - 1; i++) {
if (
data0[i].longitude == e.point.lng &&
data0[i].latitude == e.point.lat
) {
map.closeInfoWindow(); //关闭信息窗口
}
}
});
map.addOverlay(pointCollection);
})
.catch(err => {
console.log(err, "地图加载失败");
});
}
