マップコンポーネント

<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>