uni-app 自定义基座配置腾讯maps提示未添加maps模块

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：Alpha

HBuilderX版本号：4.43

手机系统：Android

手机系统版本号：Android 12

手机厂商：模拟器

手机机型：小米14

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <view class="Maps">  
        <view>longitude {{ longitude }}</view>  
        <view>latitude {{ latitude }}</view>  
    </view>  
    <map  
        id="MAP"  
        class="MapPageWrapper"  
        :latitude="latitude"  
        :longitude="longitude"  
    >  
    </map>  
</template>  

<script>  
    export default {  
        name: 'maps',  
        data() {  
            return {  
                latitude: 39.9085,  
                longitude: 116.39747,  
                mapCtx: null,  
                mapObj: null  
            }  
        },  
        onReady() {  
            uni.getLocation({  
                type: 'gcj02',  
                success: (res) => {  
                    console.log('getLocation', res);  
                    const { longitude, latitude } = res;  

                    this.longitude = longitude;  
                    this.latitude = latitude;  
                },  
                fail: (err) => {  
                    console.log('getLocation - err', err);  
                }  
            });  

                // this.mapCtx = uni.createMapContext("MAP", this);  

                this.mapObj = new plus.maps.Map('MAP');  

            // console.log('this.mapCtx', this.mapCtx);   
            console.log('this.mapObj', this.mapObj);  
        }  
    }  
</script>  

<style>  
.Maps {  
    width: 750rpx;  
}  
.MapPageWrapper {  
    width: 750rpx;  
    height: 750rpx;  
    background-color: red;  
}  
</style>

操作步骤：

自定义基座
运行到自定义基座

预期结果：

正常使用map组件
不出现未添加maps模块

实际结果： map组件正常使用

bug描述：

使用的是腾讯地图，自定义基座，勾选并配置了腾讯maps，使用<map>组件不显示地图；
使用h5+ api 或者uni.createMapContext() 则提示未添加maps模块；
使用标准基座，maps配置的是腾讯，然而map组件显示的却是高德地图，并且没提示未添加maps模块。

eggper 1楼•1 天前

在uni-app中，如果你遇到自定义基座配置腾讯maps提示未添加maps模块的问题，通常是因为在构建基座或项目配置中没有正确引入腾讯地图的SDK。以下是一个具体的步骤和代码示例，展示如何在uni-app项目中集成腾讯地图。

步骤一：确保项目已安装腾讯地图SDK

首先，你需要在uni-app项目中安装腾讯地图的插件。假设你已经有了uni-app项目，可以通过HBuilderX的插件市场或者通过命令行安装。

# 通过npm安装（如果可用）
npm install @dcloudio/uni-maps-tencent --save

步骤二：修改`manifest.json`

在manifest.json中，你需要配置腾讯地图的SDK信息。这通常包括在app-plus节点下添加maps配置。

{
  "mp-weixin": {},
  "app-plus": {
    "distribute": {
      "sdkConfigs": {
        "maps": {
          "provider": "tencent"
        }
      }
    }
  }
}

步骤三：在页面中使用腾讯地图组件

在你的页面文件中，使用<map>组件并指定provider为tencent。

<template>
  <view>
    <map 
      id="map" 
      longitude="113.324520" 
      latitude="23.099994" 
      scale="14" 
      show-location 
      style="width: 100%; height: 300px;"
      provider="tencent">
    </map>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 可以在这里添加地图相关的逻辑，比如定位、标记等
  }
}
</script>

<style>
/* 样式根据需要调整 */
</style>

步骤四：自定义基座配置

如果你在使用自定义基座，确保在构建基座时也包含了腾讯地图的SDK配置。这通常在HBuilderX的“发行”->“原生App-云打包”->“选择证书和配置文件”->“SDK配置”中进行设置。

注意事项

确保你的腾讯地图SDK密钥（key）已经正确配置在项目中，这通常在manifest.json的app-plus->distribute->sdkConfigs->tencentmap中设置。
检查你的项目依赖是否完整，有时候重新安装依赖可以解决问题。
如果你使用的是条件编译，确保在相应的平台上启用了腾讯地图的支持。