MapboxPopup

弹窗，默认插槽渲染内容，lnglat 锚定且响应式更新位置。

简介

MapboxPopup 在指定 lnglat 锚定一个弹窗，默认插槽渲染任意内容；lnglat 变更时响应式更新位置，关闭时触发 close 事件。

用法

默认插槽渲染弹窗内容，options.closeOnClick 等选项透传给 mapbox：

天安门

北京市东城区

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

const lnglat = 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: 13
      }"
    >
      <!-- 默认插槽渲染弹窗内容 -->
      <MapboxPopup :lnglat="lnglat" :options="{ closeOnClick: false, offset: 12 }">
        <div class="px-1 py-0.5">
          <p class="font-semibold">天安门</p>
          <p class="text-sm text-muted">北京市东城区</p>
        </div>
      </MapboxPopup>
    </MapboxMap>
  </div>
</template>

示例

点击设置位置

点击地图取坐标并赋给 lnglat，弹窗随之定位：

点击地图任意位置

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

const lnglat = ref<LngLatLike | null>(null)
const label = ref('')

// 点击地图取坐标，弹窗随之定位（同一 Popup 经 watch 增量更新位置）
function onClick(event: MapEventOf<'click'>) {
  const { lng, lat } = event.lngLat
  lnglat.value = [lng, lat]
  label.value = `${lng.toFixed(4)}, ${lat.toFixed(4)}`
}
</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
      }"
      @click="onClick"
    >
      <MapboxPopup v-if="lnglat" :lnglat="lnglat" :options="{ offset: 8 }">
        <div class="px-1 py-0.5 text-sm">
          {{ label }}
        </div>
      </MapboxPopup>
      <div
        v-if="!lnglat"
        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"
      >
        点击地图任意位置
      </div>
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`lnglat`		`mapboxgl.LngLat \| { lng: number; lat: number; } \| { lon: number; lat: number; } \| [number, number]` 弹窗锚定的经纬度
`options`		`mapboxgl.PopupOptions` Popup 选项 https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup

Emits

Event	Type
`close`	`[]`

Slots

Slot	Type
`default`	`{}`

Expose

通过 useTemplateRef 访问组件实例。

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

Changelog

No recent changes

MapboxLottieMarker

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

MapboxTooltip

悬浮提示，鼠标移到目标图层要素时跟随显示，slot 暴露命中要素。