VMarker

VMarker 控件用于在地图上添加标记。

• 配置文档

基础用法

使用 VMarker 组件将自定义图标添加到地图中。

marker.vue

<script lang="ts" setup>
import type { MarkerProps } from '@movk-repo/mapbox'
import type { LngLatLike } from 'mapbox-gl'
import type { PlusColumn } from 'plus-pro-components'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VMarker, VPopup, VTianditu } from '@movk-repo/mapbox'
import zooImg from '/mapbox/sprite/zoo.jpg'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

const visible = ref(true)
const center = ref<LngLatLike>([120.19, 30.26])
const formData: Ref<MarkerProps['defaultOptions']> = ref({
  draggable: false,
  rotation: 45,
})
const columns: PlusColumn[] = [
  { prop: 'draggable', label: '是否可拖拽', valueType: 'switch' },
  { prop: 'rotation', label: '旋转角度', valueType: 'slider', fieldProps: { min: 0, max: 360, step: 1 } },
]
</script>

<template>
  <VMapbox :access-token="accessToken" :center="center">
    <VTianditu :token="token" type="ter_w" />
    <VMarker v-model:center="center" :default-options="formData">
      <img :src="zooImg" class="marker-img">
      <template #popup>
        <VPopup v-model="visible">
          <span>这是一个动物园</span>
        </VPopup>
      </template>
    </VMarker>
    <template #before>
      <PlusForm v-model="formData" label-width="auto" :col-props="{ span: 8 }" :has-footer="false" :columns="columns" />
    </template>
  </VMapbox>
</template>

<style scoped>
.marker-img {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;

  animation: scale 3s infinite;
}
@keyframes scale {
  0% {
    transform: scale(0.6);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.6);
  }
}
</style>

隐藏源代码

API

markerProps

属性名	说明	类型	默认值
center	标记的经纬度坐标	object, array	必填
element	用作标记的 DOM 元素	object	-
offset	偏移量，以像素为单位	object, array	-
anchor	锚点位置	string	center
color	默认标记的颜色	string	#3FB1CE
scale	默认标记的比例	number	1
draggable	是否允许拖动标记	boolean	false
clickTolerance	点击容差	number	0
rotation	旋转角度	number	0
rotationAlignment	旋转对齐方式	string	auto
pitchAlignment	倾斜对齐方式	auto
occludedOpacity	被 3D 地形遮挡的标记的不透明度	number	0
className	CSS 类名	string	-
defaultOptions	标记的配置项（覆盖同名属性）	object	-

markerEmits

事件名	说明	回调参数
load	标记加载完成后触发	Function
update:center	标记位置更新时触发	Function
dragstart	拖动标记开始时触发	Function
drag	拖动标记时触发	Function
dragend	拖动标记结束时触发	Function

markerSlots

插槽名	说明
default	自定义标记的内容
popup	自定义弹框的内容

Inject

hooks/symbol.ts

export const markerKey: InjectionKey<ShallowRef<Marker | undefined>> = Symbol('Marker')

hooks/useMarker.ts

export function useMarker() {
  const marker = inject(markerKey)
  if (!marker) {
    consola.warn('No Marker provided')
  }
  return unref(marker)
}

类型定义

MarkerLoadEvent

plugin/Marker/Marker.ts

export interface MarkerLoadEvent {
  map: Map
  marker: Marker
}

MarkerAnchor

plugin/Marker/Marker.ts

export type MarkerAnchor =
  | 'center'
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'

MarkerEvents

plugin/Marker/Marker.ts

export interface MarkerEvents {
  dragstart: void
  drag: void
  dragend: void
}