tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-21
1362
5.4m

x-tianditumap-u 天地图 ​

天地图地图组件。支持 marker、折线、多边形、圆、图片图层和视野控制。不含定位，定位请用 x-location-s。

Key 在 天地图开发者中心 申请浏览器端 Key。App / 鸿蒙的 web-origin 要和 Key 白名单一致。

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持支持支持

调用 ​

vue
<x-tianditumap-u
  ref="mapRef"
  :api-key="apiKey"
  web-origin="https://你的域名"
  :longitude="115.853080"
  :latitude="28.686340"
  :scale="12"
  :markers="markers"
  @ready="onReady"
  @error="onError"
></x-tianditumap-u>
ts
const markers = [
  { id: 1, longitude: 115.853080, latitude: 28.686340 }
] as XTiandituMapMarker[]

mapRef.value?.moveToLocation({
  longitude: 115.85,
  latitude: 28.68
})

参数 ​

字段说明默认
apiKey天地图 Key""
webOrigin域名白名单，Web 空则用当前 origin""
coordTypegcj02 / wgs84gcj02
longitude / latitude中心点0
scale缩放16
minScale / maxScale缩放范围3 / 20
layerTypenormal / satellite / terrainnormal
showLabel地名标注true
markers / polyline / polygons / circles覆盖物[]
includePoints视野包含的点[]
enableZoom / enableScroll / enableRotate手势true
catchGesture挡住父级滚动，仅 App，初始化后不可改false
rpcTimeout桥接超时 ms10000
isDev调试浮层false

未传 iconPath 时 App / Web 用内置定位针，微信为官方红点。自定义图标可配 width / height / anchor。微信网络图标需配置 downloadFile 合法域名。

事件 ​

名称参数说明
ready{ provider, coordType }地图初始化完成
markertap标记点信息点击标记
callouttap标记点信息点击标记气泡
labeltap标记点信息点击标记文字
controltap控件信息点击自定义控件
regionchange视野信息视野变化
click{ longitude, latitude }点击地图空白处
poitapPOI 信息点击 POI
polylinetap折线信息点击折线
updated更新信息地图渲染更新
interpolatepoint插值点标记动画过程中的位置
abilitysuccess / abilityfail能力调用结果能力调用成功 / 失败
authsuccess鉴权信息Key 鉴权成功
error{ errCode, errMsg }发生错误

方法 ​

名称需要说明
getCenterLocation可选 success / fail / complete取当前中心点经纬度
moveToLocationlongitude?、latitude?，不传则回中心移动到指定坐标
translateMarker标记 id、目标坐标等平滑移动指定标记
includePointsToView点数组缩放视野以包含这些点
getRegion可选回调取当前视野四角
getScale可选回调取当前缩放级别
addMarkersmarkers，可选 clear 先清空增量添加标记
removeMarkers标记 id 数组按 id 移除标记
moveAlong标记 id、路径点、时长沿路径移动标记
addGroundOverlay图片图层配置添加地面图片图层
updateGroundOverlay图层 id 与更新字段更新地面图片图层
removeGroundOverlay图层 id移除地面图片图层
getState无同步返回当前地图状态

平台差异 ​

  1. 微信映射官方 <map>，坐标系按 coordType 转换。
  2. catchGesture 仅 App 三端，初始化后不能改。

版本 ​

版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。

更新日志 ​

1.1.1 ​

修复 ​

  • 组件对外点击事件由 tap 改为 click：tap 与 uni-app-x 内置触摸事件同名冲突，鸿蒙端 @tap 会被编译为原生触摸监听而非组件 emit，且触摸事件对象含元素引用，整体序列化曾触发 OOM 闪退。内部桥接协议与小程序原生 @tap 保持不变。
  • marker 缺省图标：XTiandituMapMarker 未传 iconPath 时 App 三端 / Web 端显示内置默认定位针图标，修复 addMarkers/translateMarker/moveAlong 无可见效果的问题（微信 map markers.iconPath 为必填，天地图 T.Marker 无 icon 不可见）。
  • 微信端 marker 尺寸对齐：markers 未显式传 width/height 时统一按 32×32 渲染，避免按图片实际尺寸/默认红点导致的图标过小（网络 iconPath 加载失败会回退默认红点，需在小程序后台配置 downloadFile 合法域名）。
  • Android / 鸿蒙资源白名单放宽：isAllowedResource 放行用户提供的 https 子资源（marker iconPath 远程图标等），修复自定义 CDN 图标被 shouldInterceptRequest/onInterceptRequest 拦成 403 不显示的问题；页面跳转仍由导航拦截，脚本/网络请求仍由 CSP 限定。

特性 ​

  • 鸿蒙端 Web 组件对齐 Android/iOS：开启 domStorageAccess、注入 Android 移动端 UA 关键字，修复天地图 JS API 的 localStorage 与触摸手势识别。

1.1.0 ​

特性 ​

  • 新增 catchGesture 属性：App 三端（Android / iOS / 鸿蒙）操作地图时阻止手势冒泡到父级滚动容器，解决地图嵌在 scroll-view 中拖动/缩放被抢走的问题。默认 false，初始化生效，不支持动态切换；Web / 微信小程序端接受但不处理。

1.0.0（2025-08-07） ​

首个正式版本。

特性 ​

  • 多端地图视图组件，一套代码覆盖 Android / iOS / 鸿蒙 / Web / 微信小程序。
  • 覆盖物：marker、polyline、polygon、circle、control、groundOverlay。
  • 视图控制：getCenterLocation、moveToLocation、getRegion、getScale、includePointsToView。
  • 标记能力：addMarkers、removeMarkers、translateMarker、moveAlong（含动画插值回调）。
  • 图片图层：addGroundOverlay、updateGroundOverlay、removeGroundOverlay。
  • 完整事件：ready、markertap、callouttap、labeltap、controltap、regionchange、tap、poitap、polylinetap、updated、interpolatepoint、abilitysuccess、abilityfail、authsuccess、error。
  • 坐标系支持 wgs84 / gcj02，微信小程序端自动对齐官方 <map> 坐标系。
  • isDev 调试浮层：握手成功且 isDev=true 才显示，生产默认隐藏。

说明 ​

  • 本组件为纯地图视图，不含定位（getLocation）能力，定位请使用独立定位插件。
  • App / 鸿蒙端基于原生 WebView 承载天地图 JS API，修改原生依赖后需重打自定义基座。
最近更新