VueTianditu

信息窗口

示例

查看代码
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-marker
        v-for="marker in markers"
        :position="marker.position"
        :extData="marker"
        @click="openInfowindow"
      ></tdt-marker>
      <tdt-infowindow v-model:target="state.currentMarker.position" :minWidth="150" :offset="[0, -30]">
        <div>
          <strong>{{ state.currentMarker.title }}</strong>
          <div>{{ state.currentMarker.position }}</div>
        </div>
      </tdt-infowindow>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const markers = [
  { title: "这是第一个标记点", position: [113.280637, 23.125178] },
  { title: "这是第二个标记点", position: [113.300637, 23.125178] },
  { title: "这是第三个标记点", position: [113.320637, 23.125178] },
  { title: "这是第四个标记点", position: [113.340637, 23.125178] }
];

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  currentMarker: {} as typeof markers[0]
});

function openInfowindow({ extData }: { extData: typeof markers[0] }) {
  state.currentMarker = { ...extData };
}
</script>

<script lang="ts">
export default { name: "demo-infowindow" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>

属性

属性类型默认值说明
minWidthNumber50弹出框的最小宽度
maxWidthNumber300弹出框的最大宽度
maxHeightNumber设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器
autoPanBooleanfalse是否开启信息窗口打开时地图自动移动（默认关闭）
closeButtonBooleantrue控制弹出窗口中出现的关闭按钮
offsetArray[0,7]弹出窗口位置的补偿值在同一图层中打开弹出窗口时对于控制锚点比较有用
autoPanPaddingArray[5,5]在地图视图自动平移产生后弹出窗口和地图视图之间的边缘
closeOnClickBooleanfalse是否开启点击地图关闭信息窗口（默认关闭）
contentString/HTMLElement""信息窗口的内容可以是字符串或 HTML
targetObject/Array打开信息窗口的覆盖物对象或经纬度数组，传入数组时自行调整 offset 参数。支持.sync(vue2)和 v-model(vue3)

事件

事件参数描述
close({type,target,lnglat})信息窗口被关闭时触发此事件
open({type,target,lnglat})信息窗口被打开时触发此事件
clickclose({type,target})点击信息窗口的关闭按钮时触发此事件

插槽

名称说明
default传入默认插槽则作为信息窗口显示