uniapp require uni-map-common 如何使用或配置？

在uniapp项目中引入uni-map-common模块时遇到问题，按照官方文档配置后仍然无法正常使用。请问具体该如何正确配置require(‘uni-map-common’)？是否需要额外的依赖安装或特殊的webpack设置？在H5和小程序平台下的配置方式是否有区别？能否提供一个完整的配置示例？

2 回复

在uni-app中，使用uni-map-common需先安装依赖：npm install uni-map-common。然后在页面中引入：import { createMap } from 'uni-map-common'。配置地图实例时需传入AppKey，支持腾讯、高德等地图服务商。


在 UniApp 中使用 uni-map-common 需要先安装并配置，这是一个用于地图功能的通用库，通常与 uni-map 或地图服务（如高德、百度地图）结合使用。以下是基本步骤：

1. 安装依赖

在项目根目录执行命令安装：

npm install uni-map-common

2. 引入与配置

在需要使用地图的页面或组件中引入：

// 页面脚本中引入
import { createMap } from 'uni-map-common';

// 初始化地图（需提前在 manifest.json 配置地图服务商）
const map = createMap('map-container', {
  provider: 'amap', // 可选: 'amap'（高德）或 'baidu'（百度）
  key: '你的地图服务密钥', // 从高德/百度平台申请
  zoom: 12,
  center: [116.3974, 39.9093] // 初始中心坐标
});

3. 配置 manifest.json

在 manifest.json 的 app-plus 或 h5 模块中添加地图配置：

{
  "h5": {
    "publicPath": "/",
    "template": "...",
    "sdkConfigs": {
      "maps": {
        "amap": {
          "key": "你的高德地图密钥"
        }
      }
    }
  }
}

4. 页面模板示例

在模板中放置地图容器：

<template>
  <view>
    <map id="map-container" style="width: 100%; height: 300px;"></map>
  </view>
</template>

注意事项：

  • 密钥申请：需到高德/百度地图开放平台注册应用并获取密钥。
  • 平台差异：H5 和 App 端配置可能不同，需按文档调整。
  • 功能扩展：uni-map-common 支持标记点、路径规划等，具体参考官方文档。

通过以上步骤即可快速集成地图功能。

回到顶部