MapMarker

Example

Example Source Code

<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

Name	Description	Type	Default
anchor	Specifies which part of the marker is closest to the coordinate point	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	bottom
color	Default color of the marker	string	#3FB1CE
coordinates	v-model The longitude and latitude position of the marker	number[]	-
draggable	Whether the marker can be dragged on the map	boolean	true
offset	Offset. Positive values indicate right/up	number[]	[0, 0]

EVENTS

Name	Description	Parameters
created	Map initialization completed event	-
update:coordinates	Marker position update event	number[]

SLOTS

Name	Description
default	Default slot

METHODS

Name	Description	Definition