MapboxMarker

标记，默认插槽渲染自定义 DOM，支持 v-model:lnglat 双向绑定与拖拽回写。

简介

MapboxMarker 在地图上放置一个标记：默认插槽提供自定义 DOM（省略则用 mapbox 默认水滴图标），位置经 v-model:lnglat 双向绑定。options.draggable 开启拖拽后，拖拽结束会把新坐标回写到绑定值。

用法

无插槽时使用默认标记，v-model:lnglat 控制位置：

<script setup lang="ts">
import type { LngLatLike } from 'mapbox-gl'

const position = ref<LngLatLike>([116.397, 39.908])
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [116.397, 39.908],
        zoom: 12
      }"
    >
      <!-- 无插槽时使用 mapbox 默认水滴标记 -->
      <MapboxMarker v-model:lnglat="position" />
    </MapboxMap>
  </div>
</template>

示例

自定义内容与拖拽

默认插槽渲染自定义 DOM，开启 draggable 后拖拽实时回写坐标：

拖拽标记：116.397, 39.908

<script setup lang="ts">
import type { LngLatLike } from 'mapbox-gl'

const position = ref<LngLatLike>([116.397, 39.908])

const label = computed(() => {
  const [lng, lat] = position.value as [number, number]
  return `${lng.toFixed(3)}, ${lat.toFixed(3)}`
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [116.397, 39.908],
        zoom: 12
      }"
    >
      <!-- 默认插槽自定义 DOM；draggable 时拖拽结束回写 v-model:lnglat -->
      <MapboxMarker v-model:lnglat="position" :options="{ draggable: true }">
        <div
          class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-primary text-white shadow-lg"
        >
          <UIcon name="i-lucide-map-pin" class="size-4" />
        </div>
      </MapboxMarker>
      <div
        class="absolute left-3 top-3 z-10 rounded-(--ui-radius) border border-default bg-default/80 px-3 py-1.5 text-sm backdrop-blur"
      >
        拖拽标记：{{ label }}
      </div>
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`lnglat`		`mapboxgl.LngLat \| { lng: number; lat: number; } \| { lon: number; lat: number; } \| [number, number]`
`options`		`Omit<mapboxgl.MarkerOptions, "element">` 标记选项；element 由默认插槽提供，无需在此传入 https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

Emits

Event	Type
`update:lnglat`	`[value: mapboxgl.LngLatLike]`

Slots

Slot	Type
`default`	`{}`

Expose

通过 useTemplateRef 访问组件实例。

Name	Type
`marker`	`() => Marker \| undefined` 获取底层 mapbox-gl Marker 实例

Changelog

No recent changes

MapboxCustomLayer

托管 CustomLayerInterface，把自定义 WebGL 图层接入声明式生命周期与样式重载重建。

MapboxLottieMarker

在标记位用 lottie-web 渲染矢量动画，支持 animationData 内联或 path 远程加载。