MapPopup

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="14" :pitch="40">
      <button
        class="primary"
        style="position: absolute; top: 5px; left: 5px"
        @click="
          ;(showCustomPopup = !showCustomPopup),
            (showDefaultPopup = !showDefaultPopup)
        "
      >
        Show/Hide Popup
      </button>
      <mb-tianditu-layer :types="['img']" />
      <mb-map-popup
        v-model:show="showCustomPopup"
        :coordinates="[116.388, 39.91266]"
        :offset="[0, -44]"
        :show-tip="false"
        anchor="bottom"
      >
        <div style="width: 100px; height: 100px; background: #81adb0d9">
          <p>Custom Popup</p>
        </div>
      </mb-map-popup>
      <mb-map-marker :coordinates="[116.388, 39.91266]" color="red" />

      <mb-map-popup
        v-model:show="showDefaultPopup"
        :coordinates="[116.4, 39.91266]"
        :hide-on-click="false"
      >
        <template #content> Default Popup </template>
      </mb-map-popup>
    </mb-map>
  </div>
</template>

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

const showCustomPopup = ref(true)
const showDefaultPopup = ref(true)
</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'）	-
class-name	Class added to the popup DOM element	string	-
coordinates	The longitude and latitude position of the marker	number[]	-
hide-on-click	Whether the popup automatically closes when the map is clicked	boolean	false
hide-on-move	Whether the popup automatically closes when the mouse moves on the map	boolean	false
offset	The popup offset. Positive values for right/down	number / number[]	[0,0]
show	v-model Whether the popup is visible	boolean	true
show-tip	Whether to automatically add a triangular tip to the popup	boolean	true
tip-color	The color of the triangular tip	string	#fff

EVENTS

Name	Description	Parameters
created	Map initialization completed event	-
update:show	Show/Hide event	show: boolean

SLOTS

Name	Description
default	Default slot
content	Content slot

METHODS

Name	Description	Definition