Map

The Map API provides programmatic control over the map component.

Try it online

getCenterLocationgetRegion

Overlays batchMove / path

Operation log will appear here

Map API demo

Call APIs with a mock MapContext; async results are written to the log below; some actions show an SDK toast at the bottom-right

Vue

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

let mapCtx

onMounted(() => {
  mapCtx = woo.createMapContext('myMap')

  mapCtx.onMarkerTap((e) => {
    woo.showToast('点击了 Marker ' + e.markerId)
  })
})

function addMarkers() {
  mapCtx.addMarkers({
    markers: [
      { id: 1, latitude: 39.908, longitude: 116.397, title: '天安门' },
      { id: 2, latitude: 39.915, longitude: 116.404, title: '故宫' },
    ],
    clear: true,
  })
}
</script>

<template>
  <mini-map id="myMap" :latitude="39.908" :longitude="116.397" :scale="14" style="width:100%;height:300px" />
  <button @click="addMarkers">添加标记</button>
</template>

React

import { useEffect, useRef } from 'react'
import woo from 'mini-sdk'

function MapDemo() {
  const mapCtx = useRef(null)

  useEffect(() => {
    mapCtx.current = woo.createMapContext('myMap')
    mapCtx.current.onMarkerTap((e) => {
      woo.showToast('点击了 Marker ' + e.markerId)
    })
  }, [])

  function addMarkers() {
    mapCtx.current?.addMarkers({
      markers: [
        { id: 1, latitude: 39.908, longitude: 116.397, title: '天安门' },
        { id: 2, latitude: 39.915, longitude: 116.404, title: '故宫' },
      ],
      clear: true,
    })
  }

  return (
    <>
      <mini-map id="myMap" latitude={39.908} longitude={116.397} scale={14} style={{ width: '100%', height: 300 }} />
      <button onClick={addMarkers}>添加标记</button>
    </>
  )
}

Import

import woo from 'mini-sdk'
// 或
import { map } from 'mini-sdk'

createMapContext

Create a map context to control the <mini-map> component on the page.

const mapCtx = woo.createMapContext(mapId: string)

Parameter	Type	Description
mapId	string	ID of the map component in the page

MapContext methods

getCenterLocation

Get the map center coordinates.

const location = await mapCtx.getCenterLocation()
console.log(location.latitude, location.longitude)

moveToLocation

Move the map center to the given coordinates.

await mapCtx.moveToLocation({
  latitude: 39.908860,
  longitude: 116.397390,
})

addMarkers

Add markers to the map.

await mapCtx.addMarkers({
  markers: [
    {
      id: 1,
      latitude: 39.908860,
      longitude: 116.397390,
      title: '天安门',
      iconPath: '/static/marker.png',
      width: 30,
      height: 30,
    },
  ],
  clear: true, // 清除已有标记
})

drawPolyline

Draw a polyline.

await mapCtx.drawPolyline({
  points: [
    { latitude: 39.908860, longitude: 116.397390 },
    { latitude: 39.915, longitude: 116.404 },
    { latitude: 39.920, longitude: 116.410 },
  ],
  color: '#6366f1',
  width: 4,
})

drawPolygon

Draw a polygon.

await mapCtx.drawPolygon({
  points: [
    { latitude: 39.908, longitude: 116.397 },
    { latitude: 39.912, longitude: 116.397 },
    { latitude: 39.912, longitude: 116.403 },
    { latitude: 39.908, longitude: 116.403 },
  ],
  fillColor: '#6366f133',
  strokeColor: '#6366f1',
  strokeWidth: 2,
})

drawCircle

Draw a circle.

await mapCtx.drawCircle({
  latitude: 39.908860,
  longitude: 116.397390,
  radius: 500, // 半径，单位米
  fillColor: '#6366f133',
  strokeColor: '#6366f1',
  strokeWidth: 2,
})

Full example

Vue

<template>
  <div class="page">
    <mini-map
      id="myMap"
      :latitude="center.lat"
      :longitude="center.lng"
      :zoom="14"
      style="width: 100%; height: 400px;"
    />
    <button @click="markCurrentLocation">标记当前位置</button>
  </div>
</template>

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

const center = ref({ lat: 39.908860, lng: 116.397390 })
let mapCtx = null

onMounted(() => {
  mapCtx = woo.createMapContext('myMap')
})

async function markCurrentLocation() {
  const location = await woo.getLocation()
  await mapCtx.moveToLocation({
    latitude: location.latitude,
    longitude: location.longitude,
  })
  await mapCtx.addMarkers({
    markers: [{
      id: 1,
      latitude: location.latitude,
      longitude: location.longitude,
      title: '我的位置',
    }],
  })
}
</script>

React

import { useEffect, useRef } from 'react'
import woo from 'mini-sdk'

const center = { lat: 39.908860, lng: 116.397390 }

function MapPage() {
  const mapCtx = useRef(null)

  useEffect(() => {
    mapCtx.current = woo.createMapContext('myMap')
  }, [])

  async function markCurrentLocation() {
    const location = await woo.getLocation()
    await mapCtx.current?.moveToLocation({
      latitude: location.latitude,
      longitude: location.longitude,
    })
    await mapCtx.current?.addMarkers({
      markers: [{
        id: 1,
        latitude: location.latitude,
        longitude: location.longitude,
        title: '我的位置',
      }],
    })
  }

  return (
    <div className="page">
      <mini-map
        id="myMap"
        latitude={center.lat}
        longitude={center.lng}
        zoom={14}
        style={{ width: '100%', height: 400 }}
      />
      <button onClick={markCurrentLocation}>标记当前位置</button>
    </div>
  )
}

Quick reference

Method	Description	Signature
createMapContext	Create a map context	(mapId: string) → MapContext
openLocation	Open the map to view a location	({ latitude, longitude, name?, ... }) → Promise<void>
chooseLocation	Open the map to pick a location	() → Promise<{ name, address, latitude, longitude }>