地图 Map

Map API 提供地图组件的程序化操控能力。

在线试用

getCenterLocationgetRegion

覆盖物一组移动 / 轨迹

操作记录将显示在此

地图 API 试用

使用 mock MapContext 调用 API，异步结果会写入下方日志；部分操作有右下角 SDK 提示

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 woo from 'mini-sdk'
// 或
import { map } from 'mini-sdk'

createMapContext

创建地图上下文，用于操控页面中的 <mini-map> 组件。

const mapCtx = woo.createMapContext(mapId: string)

参数	类型	说明
mapId	string	页面中地图组件的 ID

MapContext 方法

getCenterLocation

获取地图中心点坐标。

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

moveToLocation

将地图中心移动到指定坐标。

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

addMarkers

在地图上添加标记点。

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

drawPolyline

绘制折线。

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

绘制多边形区域。

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

绘制圆形区域。

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

完整示例

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

API 速查表

方法	说明	签名
createMapContext	创建地图上下文	(mapId: string) → MapContext
openLocation	打开地图查看位置	({ latitude, longitude, name?, ... }) → Promise<void>
chooseLocation	打开地图选择位置	() → Promise<{ name, address, latitude, longitude }>