@vuemap/vue-amap高德vue组件库常用技巧（三）- 信息框

@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。首页地址：https://vue-amap.guyixi.cn/

在上一个分享中，主要讲解了不同数量级的标号组件的使用情况，这一次分享着重讲经常与标号配套使用的信息框的使用技巧。

对于信息框，高德地图官方设定的是同一时间地图上只能显示一个infoWindow，但在特定的需求下可能会要求地图上对于出现的几个标号都给它显示对应的信息框，这时候需要做一些特殊的处理。

单信息框显示

单个信息框显示是最简单的，最新的vue3组件库里，对于信息框的显隐支持使用v-model:visible方式，这样可以直接基于简单的数值处理控制所有信息框的显隐。
示例代码如下：

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
      @click="clickMap"
      @init="initMap"
      @complete="completeMap"
      @moveend="moveendMap"
    >
      <el-amap-info-window
        v-model:visible="visible"
        :position="center"
      >
        <div>hello world</div>
      </el-amap-info-window>
    </el-amap>
  </div>
  <div class="toolbar">
    <button @click="changeVisible">
      显隐
    </button>
    <button @click="changeCenter">
      更换中心点
    </button>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapInfoWindow} from "@vuemap/vue-amap";

const zoom = ref(16);
const center = ref([120,31]);

const visible = ref(true)
const changeVisible = () => {
  visible.value = !visible.value;
}

const clickMap = (e: any) => {
  console.log('click map: ', e);
}
const initMap = (map: any) => {
  console.log('init map: ', map);
}
const completeMap = (e: any) => {
  console.log(e);
}
const moveendMap = (e: any) => {
  console.log('moveendMap: ', e);
}
const changeCenter = () => {
  const lng = center.value[0]+0.01;
  const lat = center.value[1]+0.01;
  center.value = [lng, lat];
}

</script>

<style scoped>
</style>

效果图：

多信息框处理

再上一个示例中展示的是只有一个信息框时的代码示例，当我们需要在地图上同时展示多个信息框时，单纯的信息框组件已经无法满足要求，这时候我们可以使用el-amap-marker进行模拟，毕竟本质上他们都是基于dom实现。只是信息框会多一些预置的事件和效果。
模拟的示例如下：

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
    >
      <el-amap-marker
        v-for="marker in markers"
        :key="marker.id"
        :position="marker.position"
      />
      <el-amap-marker
        v-for="marker in markers"
        :key="'info-window-'+marker.id"
        :position="marker.position"
        anchor="bottom-center"
        :offset="[0,-40]"
        :visible="marker.infoWindowVisible"
      >
        <div style="background:#dedede;padding: 20px;width: 220px;">
          <div>
            <span>id: </span>
            <span>{{marker.id}}</span>
          </div>
          <div>
            <span>内容: </span>
            <span>这是{{marker.name}}的信息框</span>
          </div>
        </div>
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapMarker} from "@vuemap/vue-amap";

const zoom = ref(16);
const center = ref([121.5273285, 31.21515044]);

const markers = ref([
  {
    position: [121.5273285, 31.21515044],
    id: 1,
    name: '张三',
    infoWindowVisible: true,
  },
  {
    position: [121.5373285, 31.21515044],
    id: 1,
    name: '李四',
    infoWindowVisible: true,
  }
])

</script>

<style scoped>
</style>

效果图

根据上述的示例即可以根据marker组件模拟出需要的信息框，可以实现页面上多信息框的展示。