小地图切换地图类型

需求：1、点击小地图，地图类型切换（卫星图，全景图等等）

　　　2、小地图图片平时只显示一个，也就是当前大地图类型对应的

 

 

 当鼠标移上去的时候，显示全部的

 

 

3、当地图类型进行切换的时候，小地图将当前地图类型对应的图片显示在最上边（点击切换数组元素）

实现：

1、v-for输出小地图图片

<!-- 地图样式切换 -->
    <div class="map_change" @mouseover="Enter" 
            @mouseleave="Out">
      <div
        class="map_box"
        v-for="(item,index) in ImgC"
        :key="index"
        @click="SmallmapClick(item,index)"
        v-show="index==0||activeIndex==true"
      >
        <img :src="item.src" />
      </div>
    </div>     

详解：由于小地图在由多个变为一个的时候，index值大的在最上面，也就是说当目前小地图只显示一张图片的时候，显示的是展开时最右边的那张图，所以我在循环中加了v-show方法并添加了判断条件

css样式

/* 地图样式切换模块样式 */
.map_change{
    height: 70px;
    position: absolute;
    left:1%;
    bottom: 3%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    
}
.map_box{
    width: 110px;
    height: 70px;
    position: absolute;
    cursor: pointer;
    padding: 2px;
    /* left: 6px; */
}

img{
    width: 100%;
    height: 100%;
}

.map_change:hover>.map_box{
    position: relative;
}

图片数组：

 data() {
    return {
    // 小地图
      ImgC: [
        {
          id: 0,
          src: require("../../../assets/img/btn_map2.jpg"),
          value: "map_image",
        },
        {
          id: 1,
          src: require("../../../assets/img/btn_map1.jpg"),
          value: "map_vector",
        },
      ],
}
}

 

2、点击事件//小地图底图切换

    SmallmapClick(data, index) {
      console.log(data, "测试data");
      console.log(index, "测试index"); 
      var tempOption = this.ImgC[0];
      this.$set(this.ImgC, 0, this.ImgC[index]);
      this.$set(this.ImgC, index, tempOption);
      if (data.value == "map_vector") {
       //方法
      } else if (data.value == "map_image") {
      //方法
      }
　　　　　　
      if (index != "0") {
        this.Out();
      }
    },
  // 鼠标移入事件
    Enter() {
      this.activeIndex = true;
    },
    // 鼠标移除事件
    Out() {
      this.activeIndex = false;
    },

功能实现

 

ps：本次重点在于使用方法：this.$set(target,key,value)

target：要更改的数据源（对象或者数组）

key：要更改的具体数据

value：重新赋的值

在使用前记得定义函数保存target的值