地図 Map

Map API は、地図コンポーネントをプログラムから操作する機能を提供します。

オンラインで試す

getCenterLocationgetRegion

オーバーレイ一括移動 / 軌跡

操作ログはここに表示されます

Map API デモ

モックの 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>
  )
}

早見表

メソッド	説明	シグネチャ
createMapContext	地図コンテキストを作成する	(mapId: string) → MapContext
openLocation	地図を開いて位置を表示する	({ latitude, longitude, name?, ... }) → Promise<void>
chooseLocation	地図を開いて位置を選択する	() → Promise<{ name, address, latitude, longitude }>