外观

Map 小程序地图 ​

VMap 是微信小程序原生 <map> 的类型化 Wevu 封装，统一尺寸、地图能力和事件命名。该组件仅支持 weapp target；业务接口、位置权限和地图 Context 仍由页面负责。

演示 ​

仅 weapp 的原生地图VMap 可观察预览

文档站不能跑微信客户端同层地图。这里用腾讯地图 JS API GL 展示同一套 VMap 契约：中心点、标记和 regionchange。

杭州西湖
中心
杭州西湖
坐标
30.274, 120.155
标记
1
regionchange
0

尚未收到 regionchange

腾讯地图 GL 是文档/Web Preview 的可见宿主。定位权限和 Map Context 仍只在小程序运行时可用。

文档站不能跑微信客户端同层地图。演示用腾讯地图 JS API GL 展示同一套 VMap 契约：中心点、标记和 regionchange。定位权限和 Map Context 仍只在小程序运行时可用。

使用 ​

vue
<script setup lang="ts">
import { VMap } from '@/components/ui/map'

const markers = [{
  id: 1,
  latitude: 30.274,
  longitude: 120.155,
  iconPath: '/static/marker.png',
  width: 28,
  height: 28
}]
</script>

<template>
  <VMap
    map-id="activityMap"
    :latitude="30.274"
    :longitude="120.155"
    :markers="markers"
    show-location
    @marker-tap="openMarker"
    @region-change="syncViewport"
  />
</template>

show-location 默认关闭。只有业务确实需要当前位置，且 app.json 已声明 permission.scope.userLocation 时才显式开启。

表单内只读地图 ​

表单中的位置预览应关闭手势，避免地图抢占页面滚动；组件同时把宽度限制在父容器和 100vw 内，并将高度限制在 720px 内，避免开发者工具纹理超限。

vue
<VMap
  map-id="locationPreview"
  :latitude="latitude"
  :longitude="longitude"
  :markers="markers"
  :enable-scroll="false"
  :enable-zoom="false"
  :show-location="false"
  height="220px"
/>

VMap 自有 API ​

latitude、longitude 仍是渲染地图所需的原生必填参数。VMap 只额外定义以下基础封装能力：

PropTypeDefault说明
mapIdstring必填映射为原生 id，供 wx.createMapContext 等能力定位地图实例
classNamestring''合并到组件默认的 varo-map 类名
ariaLabelstring'地图'映射为原生 aria-label
width / heightnumber | string100% / 240数字按 px 处理，并限制在父容器、100vw 与 720px 高度以内

标记点、路线、覆盖物、视野、手势等参数及地图事件沿用微信原生 map 组件语义；事件在 Vue 模板中使用 @marker-tap、@region-change 等写法。完整参数、事件返回值、基础库版本和权限要求请参考微信小程序 map 组件。