ElementUI中el-table表格实现单选经纬度地图渲染效果

需求:选中该表格行,在地图上显示该行地理位置信息

需求.png

实现多选效果非常简单,手动添加一个el-table-column，设type属性为selection即可；

那要实现一个单选效果呢?思路:选中数量>1的时候进行清空选中效果,使用pop()方法去掉数组最后一个元素,然后在数组不等于0的情况下调用地图初始化组件,使用vuex或者父传子的方法给子组件

用到了element-ui中的这个属性@selection-change="handleSelectionChange"和定义一个ref

在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, "地图加载失败");
        });
    }