地图组件

<mini-map> 是基于 Google Maps JavaScript API 的 Web Component 地图组件。

基础用法

<mini-map
  id="myMap"
  latitude="39.908860"
  longitude="116.397390"
  zoom="14"
  style="width: 100%; height: 300px;"
/>

属性

属性	类型	说明
id	string	组件 ID（用于 createMapContext）
latitude	number	中心纬度
longitude	number	中心经度
zoom	number	缩放级别（1~20）

程序化操控

通过 createMapContext 获取地图上下文后操控：

const mapCtx = woo.createMapContext('myMap')

// 添加标记点
await mapCtx.addMarkers({
  markers: [
    {
      id: 1,
      latitude: 39.908860,
      longitude: 116.397390,
      title: '北京天安门',
    },
  ],
})

// 绘制路线
await mapCtx.drawPolyline({
  points: [
    { latitude: 39.908, longitude: 116.397 },
    { latitude: 39.915, longitude: 116.404 },
  ],
  color: '#6366f1',
  width: 4,
})

// 绘制区域
await mapCtx.drawCircle({
  latitude: 39.908860,
  longitude: 116.397390,
  radius: 1000,
  fillColor: '#6366f120',
  strokeColor: '#6366f1',
})

Bridge 命令

地图组件通过以下 Bridge 命令交互（由 map-runtime-src.js 处理）：

命令	说明
Map.addMarkers	添加标记点
Map.drawPolyline	绘制折线
Map.drawPolygon	绘制多边形
Map.drawCircle	绘制圆形
Map.getCenterLocation	获取中心坐标
Map.moveToLocation	移动中心到指定坐标

完整示例：附近门店

<template>
  <div class="page">
    <mini-map
      id="storeMap"
      :latitude="center.lat"
      :longitude="center.lng"
      :zoom="13"
      style="width: 100%; height: 60vh;"
    />
    <div class="store-list">
      <div
        v-for="store in stores"
        :key="store.id"
        class="store-item"
        @click="focusStore(store)"
      >
        <span>{{ store.name }}</span>
        <span>{{ store.distance }}km</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import woo from 'mini-sdk'

const center = ref({ lat: 39.908, lng: 116.397 })
const stores = ref([])
let mapCtx = null

onMounted(async () => {
  mapCtx = woo.createMapContext('storeMap')

  // 获取用户位置
  try {
    const loc = await woo.getLocation()
    center.value = { lat: loc.latitude, lng: loc.longitude }
  } catch {}

  // 加载门店列表
  const res = await woo.request.get('/api/stores/nearby', {
    header: {},
  })
  stores.value = res.data.list

  // 在地图上标记所有门店
  await mapCtx.addMarkers({
    markers: stores.value.map((s, i) => ({
      id: i,
      latitude: s.latitude,
      longitude: s.longitude,
      title: s.name,
    })),
  })
})

async function focusStore(store) {
  await mapCtx.moveToLocation({
    latitude: store.latitude,
    longitude: store.longitude,
  })
}
</script>