uni-app app端地图平面图和卫星图切换问题，hbuilderx 3.7.11

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.7.11

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：xiaomi5

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

:style="{height: mapHeight,marginTop: statusBarHeight}"  
id="maps"  
ref="maps"  
show-scale="true"  
latitude="latitude"  
longitude="longitude"  
markers="covers"  
scale="scale"  
polygons="polygonsData"  
polyline="polylineData"  
enable-satellite="enableSatellite"  
show-location="showLocation"  
@markertap="chooseItem"  
@tap="clickMap"  

<cover-view slot="callout">  
    <cover-view class="customCallout" marker-id="123">  
        <text style="font-size: 10px;color: #00BFFF;">测试</text>  
    </cover-view>  

</cover-view>  
</map>

changeMapStyle () {  
    this.wxAc = !this.wxAc  
    console.log('改变卫星图')  
    uni.$emit('resourceSatellite', this.wxAc)  
},          
uni.$on('resourceSatellite', function(data) {  
    console.log(data)  
    this.enableSatellite = data  
    // this.$set(this, this.enableSatellite, data)  
    var mapContext = uni.createMapContext('maps', this)  
})

操作步骤：

在subnvue页面点击按钮切换卫星图触发$emit，接收到事件了，值赋值了，地图未切换

预期结果：

实现卫星图和平面图的切换

实际结果：

未实现动态切换

bug描述：

nvue页面切换卫星图和平面图无效，

yuanlaile 1楼•5 天前

有大佬来帮忙看下吗，uniapp做地图以前都是用webview来做，这次用map组件遇到更多的问题了，地图咋手动刷新啊？

itying888 2楼•5 天前

地图都是用的nvue页面来写的

yuanlaile 3楼•5 天前

有官方大佬帮忙解答下吗

itying888 4楼•5 天前

有人遇到过这种过这种切换的需求吗，咋解决的

zlyuanteng 5楼•5 天前

这里面设置v-if控制地图显示都不行

sinazl 6楼•5 天前

在 uni-app 中，如果你需要在 App 端实现地图的平面图和卫星图切换功能，可以使用 map 组件，并结合 map 组件的 type 属性来实现。以下是一个简单的示例，展示如何在 uni-app 中实现地图的平面图和卫星图切换。

1. 创建 `map` 组件

首先，在页面的 template 部分创建一个 map 组件，并为其绑定一个 id，以便后续操作。

<template>
  <view>
    <map id="myMap" :style="mapStyle" :latitude="latitude" :longitude="longitude" :markers="markers" :type="mapType"></map>
    <button @click="switchMapType">切换地图类型</button>
  </view>
</template>

2. 定义地图数据和切换函数

在 script 部分，定义地图的初始数据（如经纬度、标记点等），并实现切换地图类型的函数。

<script>
export default {
  data() {
    return {
      latitude: 39.90469, // 初始纬度
      longitude: 116.40717, // 初始经度
      markers: [
        {
          id: 1,
          latitude: 39.90469,
          longitude: 116.40717,
          name: '北京'
        }
      ],
      mapType: 'standard', // 初始地图类型为平面图
      mapStyle: 'width: 100%; height: 300px;' // 地图样式
    };
  },
  methods: {
    switchMapType() {
      // 切换地图类型
      this.mapType = this.mapType === 'standard' ? 'satellite' : 'standard';
    }
  }
};
</script>