信息窗口

地图信息窗口组件，用于创建信息窗覆盖物

基础示例

<template>
  <tlbs-map
    ref="mapRef"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
    @map_inited="onMapInited"
  >
    <div class="control-container">
      <button @click.stop="switchInfoWindow">
        {{ visible ? '关闭' : '开启' }}窗口
      </button>
      <button @click.stop="center = { lat: 40.040452, lng: 116.273486 }">
        腾讯总部大楼
      </button>
      <button @click.stop="center = { lat: 40.008352, lng: 116.389672 }">
        亚洲金融大厦
      </button>
      <button @click.stop="getLayerInstance">
        打印窗口实例
      </button>
    </div>
    <tlbs-info-window
      ref="infoWindowRef"
      :visible="visible"
      :position="center"
      content="Hello World!"
      :options="{
        offset: {
          x: 0,
          y: 0,
        }
      }"
    />
  </tlbs-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue-demi';

export default defineComponent({
  name: 'InfoWindowDemo',
  setup() {
    const mapRef = ref(null);
    const infoWindowRef = ref(null);
    const center = ref({ lat: 40.040452, lng: 116.273486 });
    const zoom = ref(17);
    const visible = ref(true);
    const onClick = (e: Event) => {
      console.log(e);
    };

    const switchInfoWindow = () => {
      visible.value = !visible.value;
    };

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、窗口实例，调用地图实例、窗口实例方法
      console.log(mapRef.value.map);
      console.log(infoWindowRef.value.infoWindow);
    };

    const getLayerInstance = () => {
      // 可以获取窗口实例，调用窗口实例方法
      console.log(infoWindowRef.value.infoWindow);
    };
    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      infoWindowRef,
      visible,
      switchInfoWindow,
      onMapInited,
      getLayerInstance,
    };
  },
});
</script>
<style scoped>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
button {
  padding: 4px;
  background-color: #fff;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>

props

名称	类型	说明
visible	Boolean	是否显示信息窗口
position	TMap.LatLngData	信息窗的经纬度坐标，参考官网文档
content	String	信息窗显示内容，默认为空字符串。当options.enableCustom为true时，需传入信息窗体的dom字符串，参考官网文档
options	TMap.InfoWindowOptions	除了上述属性的其他配置参数，参考TMap.InfoWindowOptions

TMap.InfoWindowOptions

信息窗配置参数。

属性名称	类型	说明
zIndex	Number	信息窗的z-index值，默认为0。
offset	Object	信息窗相对于position对应像素坐标的偏移量，x方向向右偏移为正值，y方向向下偏移为正值，默认为{x:0, y:0}。

事件

名称	参数	说明
closeclick	none	点击信息窗的关闭按钮时会触发此事件。

组件实例属性

名称	类型	说明
infoWindow	TMap.InfoWindow	信息窗口实例。实例方法参考官网文档

TMap.InfoWindow方法

方法	返回值	说明
setPosition(position:LatLng)	this	设置经纬度位置。
setContent(content:String)	this	设置信息窗显示内容。
setMap(map:Map)	this	设置信息窗口所在的map对象，传入null则代表将infoWindow从Map中移除。
getMap()	Map	获取信息窗口所在的map对象。
open()	this	打开信息窗口。
close()	this	关闭信息窗口。
destroy()	this	销毁信息窗。
on(eventName:String, listener:Function)	this	添加listener到eventName事件的监听器数组中。
off(eventName:String, listener:Function)	this	从eventName事件的监听器数组中移除指定的listener。