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

 

 

 

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

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

<template><view class="map-view-wap"><!-- 地图显示容器 --><zz-map-view class="map-box" ref="mapBox" /><!-- 右下角的小图层 --><view class="map-mode" @click="changeMapMode()"><!-- 普通街道视图 --><image class="map-mode-img" :class="!mapMode ? 'vector' : ''" src="http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png" mode=""></image><!-- 卫星视图 --><image class="map-mode-img satellite" src="http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png" mode=""></image></view></view>
</template>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;}}
}