地图标记（MapMarker）

示例

示例源码

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="14">
      <mb-tianditu-layer />
      <mb-map-marker
        v-model:coordinates="defaultMarkerCoordinates"
        color="red"
      />
      <mb-map-marker v-model:coordinates="customMarkerCoordinates">
        <button class="primary">按钮</button>
      </mb-map-marker>
      <mb-map-marker v-model:coordinates="customMarkerCoordinates2">
        <img
          src="https://cdn.pixabay.com/animation/2022/10/11/23/03/23-03-06-809_512.gif"
          style="width: 64px; height: 64px"
        />
      </mb-map-marker>
      <mb-map-marker v-model:coordinates="customMarkerCoordinates3">
        <Test1 />
      </mb-map-marker>
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'

const Test1 = {
  setup() {
    return () =>
      h('div', {
        innerHTML: 'Vue Comp',
        style: { color: 'red', fontSize: '20px', fontWeight: 'bolder' },
      })
  },
}

const defaultMarkerCoordinates = ref([116.38745, 39.91266])
const customMarkerCoordinates = ref([116.40123, 39.91266])
const customMarkerCoordinates2 = ref([116.39123, 39.91266])
const customMarkerCoordinates3 = ref([116.38123, 39.91266])
</script>

API

PROPS

名称	描述	类型	默认值
anchor	表示标记的哪个部位距离坐标点最近	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	bottom
color	默认标记的颜色	string	#3FB1CE
coordinates	v-model marker的经纬度位置	number[]	-
draggable	能否在地图拖拽	boolean	true
offset	偏移量 正数表示右/上	number[]	[0, 0]

EVENTS

名称	描述	参数
created	地图初始化完成事件	-
update:coordinates	marker位置更新事件	number[]

SLOTS

名称	描述
default	默认插槽

METHODS

名称	描述	定义