气泡弹窗（MapPopup）

示例

示例源码

<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

名称	描述	类型	默认值
anchor	表示标记的哪个部位距离坐标点最近	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	-
class-name	添加到popup dom元素上的Class	string	-
coordinates	marker的经纬度位置	number[]	-
hide-on-click	点击地图时是否自动关闭气泡弹窗	boolean	false
hide-on-move	鼠标在地图移动时是否自动关闭气泡弹窗	boolean	false
offset	popup偏移量 正向为右/下	number / number[]	[0,0]
show	v-model 是否显示	boolean	true
show-tip	是否自动添加气泡指向三角形	boolean	true
tip-color	指向三角形颜色	string	#fff

EVENTS

名称	描述	参数
created	地图初始化完成事件	-
update:show	显示隐藏事件	show: boolean

SLOTS

名称	描述
default	默认插槽
content	内容插槽

METHODS

名称	描述	定义