uni-app 【报Bug】vue3 map组件高德地图不显示

在使用 uni-app 开发时，如果遇到 vue3 中 map 组件（高德地图）不显示的问题，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 检查地图组件的配置

• 确保在 pages.json 中正确配置了地图组件的路径和权限。
• 例如：

  {
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "navigationBarTitleText": "地图",
          "app-plus": {
            "titleNView": false,
            "map": {
              "provider": "amap"
            }
          }
        }
      }
    ]
  }
  

2. 检查高德地图的 Key

• 确保在 manifest.json 中正确配置了高德地图的 AppKey。
• 例如：

  {
    "app-plus": {
      "maps": {
        "amap": {
          "key": "你的高德地图Key"
        }
      }
    }
  }
  

3. 检查地图组件的使用

• 确保在页面中正确使用了 map 组件，并且设置了必要的属性。
• 例如：

  <template>
    <view>
      <map
        id="map"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        style="width: 100%; height: 300px;"
      ></map>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const latitude = ref(39.90923);
  const longitude = ref(116.397428);
  const markers = ref([
    {
      id: 1,
      latitude: 39.90923,
      longitude: 116.397428,
      name: '北京市'
    }
  ]);
  </script>
  

4. 检查网络请求权限

• 确保在 manifest.json 中正确配置了网络请求权限。
• 例如：

  {
    "app-plus": {
      "permissions": {
        "maps": {
          "amap": {
            "key": "你的高德地图Key"
          }
        }
      }
    }
  }
  

5. 检查地图组件的样式

• 确保地图组件的样式设置正确，例如 width 和 height 不能为 0 或 auto。
• 例如：

  map {
    width: 100%;
    height: 300px;
  }
  

6. 检查地图组件的生命周期

• 确保地图组件在页面加载时已经正确初始化。
• 例如：

  <script setup>
  import { onMounted } from 'vue';
  
  onMounted(() => {
    // 地图初始化逻辑
  });
  </script>