更新记录

1.0.1（2026-09-01） 下载此版本

更新日志

1.0.0（2026-09-01）

更新日志

1.0.1（2026-09-01）

首个发布版本。

新增

• 支持 H5、Android、iOS、HarmonyOS 平台的天地图展示。
• 支持地图中心点、缩放级别、容器高度、缩放控件与多标注配置。
• 支持顶部地址搜索框：showSearch、searchPlaceholder，可搜索并定位地址。
• 支持右下角当前位置定位按钮：showLocation，并提供 location、location-error 事件。
• 支持底图配置：mapType 可选矢量底图（vector）、影像底图（image）、地形晕渲（terrain）。
• 支持地图操作开关：mapOperations 可分别控制拖拽、双击缩放、双指缩放和惯性拖拽。
• 新增 H5 实例方法：setMarkers(markers)，可批量替换标注。
• 新增 H5 实例方法：addOverlays(overlays)、clearOverlays()，支持批量添加、清除覆盖物。
• 覆盖物支持 circle、polyline、polygon、rect、label、infowindow、polylineArrow、cardinalCurve、cardinalCurveArrow，并兼容 marker。
• 覆盖物支持 click 配置和 overlay-click 点击事件。
• App 本地地图页及资源已内置在插件目录，便于插件市场分发。

说明

• mapType 默认值为 vector。
• mapOperations 的四项操作默认均为开启状态。
• 小程序端暂不支持天地图 JavaScript API。

1.0.0（2026-09-01） 下载此版本

更新日志

1.0.0（2026-09-01）

首个发布版本。

新增

• 支持 H5、Android、iOS、HarmonyOS 平台的天地图展示。
• 支持地图中心点、缩放级别、容器高度、缩放控件与多标注配置。
• 支持顶部地址搜索框：showSearch、searchPlaceholder，可搜索并定位地址。
• 支持右下角当前位置定位按钮：showLocation，并提供 location、location-error 事件。
• 支持底图配置：mapType 可选矢量底图（vector）、影像底图（image）、地形晕渲（terrain）。
• 支持地图操作开关：mapOperations 可分别控制拖拽、双击缩放、双指缩放和惯性拖拽。
• 新增 H5 实例方法：setMarkers(markers)，可批量替换标注。
• 新增 H5 实例方法：addOverlays(overlays)、clearOverlays()，支持批量添加、清除覆盖物。
• 覆盖物支持 circle、polyline、polygon、rect、label、infowindow、polylineArrow、cardinalCurve、cardinalCurveArrow，并兼容 marker。
• 覆盖物支持 click 配置和 overlay-click 点击事件。
• App 本地地图页及资源已内置在插件目录，便于插件市场分发。

说明

• mapType 默认值为 vector。
• mapOperations 的四项操作默认均为开启状态。
• 小程序端暂不支持天地图 JavaScript API。

平台兼容性

uni-app(4.23)

lv-tianditu-map

基于天地图 JavaScript API的 uni-app 地图组件。需要在天地图开放平台申请开发者密钥，组件不会内置或上传密钥。

使用

<template>
  <lv-tianditu-map
    ref="map"
    token="你的天地图密钥"
    :center="[116.40769, 39.89945]"
    :zoom="12"
    map-type="vector"
    :map-operations="{ drag: true, doubleClickZoom: true, pinchToZoom: true, inertia: true }"
    :markers="markers"
    :show-search="true"
    :show-location="true"
    @click="onMapClick"
    @marker-click="onMarkerClick"
  />
</template>

完整演示页

以下代码与项目中的 pages/tianditu-map/tianditu-map.vue 保持一致，可直接复制为演示页面：

<template>
    <view class="page-map-wrap">
        <lv-tianditu-map ref="map" class="page-map" :markers="markers" :show-search="true" :show-location="true"
            @overlay-click="onOverlayClick" />
        <button class="test-markers-button" @click="setTestMarkers">设置测试标注</button>
        <button class="test-overlays-button" @click="addTestOverlays">添加测试覆盖物</button>
        <button class="clear-overlays-button" @click="clearTestOverlays">清除测试覆盖物</button>
    </view>
</template>

<script>
    import LvTiandituMap from '@/uni_modules/lv-tianditu-map/components/lv-tianditu-map/lv-tianditu-map.vue'

    export default {
        components: { LvTiandituMap },
        data() {
            return {
                markers: [{ lng: 116.40769, lat: 39.89945, title: '天安门', content: '北京市东城区' }]
            }
        },
        methods: {
            /** 调用组件 setMarkers 方法，一次设置多条用于验证的标注。 */
            setTestMarkers() {
                this.$refs.map.setMarkers([
                    { lng: 116.40769, lat: 39.89945, title: '天安门', content: '北京市东城区' },
                    { lng: 116.39748, lat: 39.90872, title: '故宫博物院', content: '北京市东城区景山前街4号' },
                    { lng: 116.39057, lat: 39.91367, title: '北海公园', content: '北京市西城区文津街1号' }
                ])
            },
            /** 调用组件 addOverlays 方法，添加全部类型的测试覆盖物。 */
            addTestOverlays() {
                this.$refs.map.addOverlays([
                    { type: 'circle', center: [116.40769, 39.89945], radius: 450, options: { color: '#2979ff', weight: 3, fillColor: '#2979ff', fillOpacity: 0.15 } },
                    { type: 'polyline', points: [[116.39748, 39.90872], [116.40769, 39.89945], [116.39057, 39.91367]], options: { color: '#19be6b', weight: 5, opacity: 0.9 } },
                    { type: 'polygon', points: [[116.4005, 39.9145], [116.4085, 39.9145], [116.4045, 39.9205]], options: { color: '#ff9900', weight: 3, fillColor: '#ff9900', fillOpacity: 0.2 } },
                    { type: 'rect', leftTop: [116.383, 39.906], rightBottom: [116.39, 39.9], click: false, color: '#e45656', weight: 3, fillColor: '#e45656', fillOpacity: 0.15 },
                    { type: 'label', lon: 116.413, lat: 39.906, text: '文字标签', offsetX: 8, offsetY: -28 },
                    { type: 'infowindow', lon: 116.40769, lat: 39.89945, content: '信息窗口测试', options: { autoPan: false } },
                    { type: 'polylineArrow', points: [[116.383, 39.918], [116.395, 39.922]], color: '#9c26b0', weight: 4 },
                    { type: 'cardinalCurve', points: [[116.41, 39.918], [116.418, 39.923], [116.426, 39.918]], color: '#00aaff', weight: 4 },
                    { type: 'cardinalCurveArrow', points: [[116.39, 39.89], [116.402, 39.887], [116.414, 39.892]], color: '#ff6600', weight: 4 }
                ])
            },
            /** 调用组件 clearOverlays 方法，清除全部测试覆盖物。 */
            clearTestOverlays() {
                this.$refs.map.clearOverlays()
            },
            /** 展示覆盖物点击回调，矩形覆盖物设置为不可点击用于对比验证。 */
            onOverlayClick(event) {
                const type = event && event.overlay && event.overlay.type ? event.overlay.type : '未知覆盖物'
                uni.showToast({ title: '已点击 ' + type, icon: 'none' })
            }
        }
    }
</script>

<style scoped>
    .page-map-wrap { position: relative; width: 100%; height: 100vh; }
    .page-map { display: block; width: 100%; height: 100%; }
    .test-markers-button, .test-overlays-button, .clear-overlays-button { position: absolute; z-index: 1001; left: 24rpx; height: 72rpx; margin: 0; padding: 0 28rpx; border-radius: 36rpx; color: #fff; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, .18); font-size: 26rpx; line-height: 72rpx; }
    .test-markers-button { bottom: 40rpx; background: #2979ff; }
    .test-overlays-button { bottom: 128rpx; background: #19be6b; }
    .clear-overlays-button { bottom: 216rpx; background: #909399; }
</style>

坐标系转换

天地图组件应传入 WGS84 坐标。若坐标来自高德、腾讯等 GCJ-02 数据源，或来自百度 BD-09 数据源，请在设置地图中心点、标注和覆盖物前完成转换。

安装

npm install coordtransform

coordtransform 支持 WGS84、GCJ-02 和 BD-09 的相互转换，详见其 npm 页面。

GCJ-02 转 WGS84

import coordtransform from 'coordtransform'

// 高德、腾讯等 GCJ-02 坐标
const gcjLng = 116.404
const gcjLat = 39.915

// 转换结果为 [经度, 纬度]，可直接传给地图组件
const [lng, lat] = coordtransform.gcj02towgs84(gcjLng, gcjLat)

this.$refs.map.setCenter([lng, lat])
this.$refs.map.setMarkers([
  { lng, lat, title: 'WGS84 标注点' }
])

BD-09 转 WGS84

import coordtransform from 'coordtransform'

// 百度 BD-09 坐标需要先转 GCJ-02，再转 WGS84
const [gcjLng, gcjLat] = coordtransform.bd09togcj02(116.410369, 39.921337)
const [lng, lat] = coordtransform.gcj02towgs84(gcjLng, gcjLat)

this.$refs.map.setView([lng, lat], 16)

原始数据已经是 GPS/WGS84 坐标时，无需重复转换。

Props

事件和方法

• ready(map)：地图实例初始化完成。
• click({ lng, lat, originalEvent })：点击地图。
• marker-click({ marker, index, originalEvent })：点击标记点。
• search({ name, address, lng, lat, raw })：选择地址搜索结果并定位后触发。
• location({ lng, lat, accuracy })：定位当前位置并移动地图后触发。
• location-error({ message })：定位权限被拒绝、超时或当前环境不支持定位时触发。
• overlay-click({ overlay, index, originalEvent })：点击通过 addOverlays 添加的覆盖物。
• error(error)：密钥缺失或 SDK 加载失败。
• H5 端可通过 ref 调用 setCenter(center)、setView(center, zoom)、setMapOperations(operations)、setMarkers(markers)、addOverlays(overlays)、clearOverlays()、renderMarkers()、clearMarkers()；其中 setMapOperations(operations) 可动态开关地图操作，setMarkers(markers) 可一次替换多个标注，addOverlays(overlays) 支持一次添加多个覆盖物。App 端请直接更新组件属性以刷新本地地图页。

addOverlays(overlays) 支持：circle、polyline、polygon、rect、label、infowindow、polylineArrow、cardinalCurve、cardinalCurveArrow，另外兼容已有的 marker。样式可写在 options 中，也可直接传入 color、weight、opacity、fillColor、fillOpacity、lineStyle。每项还可传入 click：默认 true，设置为 false 时不触发组件的 overlay-click 事件。

• circle：{ type: 'circle', lon, lat, rad }，也兼容 { center: [lng, lat], radius }。
• polyline / polylineArrow / cardinalCurve / cardinalCurveArrow：{ type, points: [[lng, lat], ...] }。
• polygon：{ type: 'polygon', points: [[lng, lat], ...] }。
• rect：{ type: 'rect', leftTop: [lng, lat], rightBottom: [lng, lat] }。
• label：{ type: 'label', lon, lat, text, offsetX?, offsetY? }。
• infowindow：{ type: 'infowindow', lon, lat, content, offsetX?, offsetY?, options? }。

平台

支持 H5、Android、iOS、HarmonyOS：

• H5 直接加载天地图 JavaScript API。
• Android、iOS、HarmonyOS 通过 web-view 加载组件内的 /uni_modules/lv-tianditu-map/hybrid/html/lv-tianditu-map.html。web-view 在 App-vue 页面中会占满当前页面，建议将地图组件作为独立页面的主体使用。
• 首次加入组件后请重新编译 App，确保组件内的 hybrid/html 本地地图页被打包。
• 鸿蒙工程需要保留网络访问权限；若开启了域名白名单，请加入 api.tianditu.gov.cn 和 js.cdn.aliyun.dcloud.net.cn。
• 鸿蒙支持依赖 HBuilderX 4.23 或更高版本。

各小程序端暂不支持。

默认测试密钥

• H5：b66d8acdaa55bf17b2c043f96ef64387
• Android：e3df3c5f550c02e718e166aac3235716
• iOS、HarmonyOS 未设置默认值，需传入各自已授权的天地图密钥。

测试密钥仅便于调试。上线前请在天地图控制台为实际域名或应用申请并传入业务密钥。