Map component

<mini-map> is a Web Component map built on the Google Maps JavaScript API.

Basic usage

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

Properties

Property	Type	Description
id	string	Component id (for createMapContext)
latitude	number	Center latitude
longitude	number	Center longitude
zoom	number	Zoom level (1–20)

Programmatic control

Get a map context with createMapContext, then call methods on it:

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 commands

The map component talks to the runtime through these Bridge commands (handled in map-runtime-src.js):

Command	Description
Map.addMarkers	Add markers
Map.drawPolyline	Draw a polyline
Map.drawPolygon	Draw a polygon
Map.drawCircle	Draw a circle
Map.getCenterLocation	Get center coordinates
Map.moveToLocation	Move the map center to coordinates

Full example: nearby stores

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