天地图图层切换显示

效果图：点击右下角小图层切换图层

 

 

 

 天地图参考文档：天地图API

 可以切换上面五种视图，这里只用其中两种来模拟效果。

 
 
 data() {
     return {
         mapMode: true, //默认地图为普通街道视图
     };
 }
 
 
// 点击切换图层
changeMapMode() {
    this.mapMode = !this.mapMode; //点击切换
    const mapBox = this.$refs.mapBox;
    const mapTypes = [window.TMAP_NORMAL_MAP, window.TMAP_HYBRID_MAP];
    // 设置地图类型
    if (this.mapMode) {
        mapBox.map.setMapType(mapTypes[0]);
    } else {
        mapBox.map.setMapType(mapTypes[1]);
    }
},
 
 
.map-view-wap {
    padding: 0 24rpx 20rpx 24rpx;
    position: relative;
    .map-box {
        height: 464rpx;
        border: 2rpx solid #D5D5D5;
        background: #D5D5D5;
    }
    .map-mode {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        bottom: 44rpx;
        right: 46rpx;
        z-index: 400;
        .map-mode-img {
            width: 100%;
            height: 100%;
        }
        // 设置层叠效果
        .satellite {
            position: relative;
            bottom: 60rpx;
            left: 10rpx;
        }
        // 控制是否是普通视图的小图层在上面
        .vector {
            z-index: 401;
        }
    }
}