@vuemap/vue-amap高德vue组件库常用技巧（二）- 点标记

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

在使用地图做可视化效果展示时，最常见的就是标号功能。日常开发中可能会使用到几十个、几百个、甚至几万个标号的展示，今天主要介绍在使用@vuemap/vue-amap时怎么对不同数量级、不同需求的标号进行展示。

1、300数量内标号

对于日常开发中只需要少量展示标号的需求时，我们可以直接使用el-amap-marker组件进行标号展示，该组件基于AMap.Marker实现，本质上是创建一个dom，通过position:absolute;悬浮在地图上方，由于基于dom实现，因此可以使用常用的html和css编写marker。 示例如下：

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
      @click="clickMap"
      @init="initMap"
    >
      <el-amap-marker
        :position="componentMarker.position"
        :visible="componentMarker.visible"
        :draggable="componentMarker.draggable"
        :move-options="moveOptions"
        @init="markerInit"
        @click="clickMarker"
      >
        <div style="padding: 5px 10px;white-space: nowrap;background: blue;color: #fff;">
          测试content
        </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 componentMarker = ref({
  position: [121.5273285, 31.21315058],
  visible: true,
  draggable: false
});

const moveOptions = ref({
  duration: 200,
  autoRotation: false
})

const clickMap = (e: any) => {
  console.log('click map: ', e);
}
const initMap = (map: any) => {
  console.log('init map: ', map);
}

const clickMarker = () => {
  alert('点击了标号');
}

const markerInit = (e: any) => {
  console.log('marker init: ', e);
}

</script>

<style scoped>
.map-page-container{
  height: 500px;
}
</style>

效果图：

上述示例中可以看出对于el-amap-marker组件，我们并没有使用属性去添加标号的内容，而是直接使用slot，相比使用content添加内容，使用slot可以更加方便直观的编写代码，也更符合vue组件规范。同时组件的slot支持响应式，会在内容更新时同步修改marker展示内容，比较适合根据条件展示不同的图标，以及一些复杂的标号内容显示。

2、千级数量

当marker数据量超过300以上时已经不适合使用dom格式的marker，这时候需要使用el-amap-label-marker组件，该组件支持添加图片和文本，同时支持标号之间的避让，甚至可以与底图默认标号进行避让，比较适合做一些poi等点位的显示。 示例如下：

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
      @click="clickMap"
      @init="initMap"
    >
      <el-amap-layer-labels>
        <el-amap-label-marker
          :visible="labelOptions.visible"
          :position="labelOptions.position"
          :text="labelOptions.text"
          :icon="labelOptions.icon"
          @click="clickMarker"
        />
      </el-amap-layer-labels>
    </el-amap>
  </div>
  <div class="toolbar">
    <button @click="changeVisible">
      {{ labelOptions.visible? '隐藏' : '显示' }}
    </button>
  </div>
</template>

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

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

const labelOptions = ref({
  visible: true,
  position: [121.5495395, 31.21515044],
  text: {
    content: '测试content',
    direction: 'right',
    style: {
      fontSize: 15,
      fillColor: '#fff',
      strokeColor: 'rgba(255,0,0,0.5)',
      strokeWidth: 2,
      padding: [3, 10],
      backgroundColor: 'yellow',
      borderColor: '#ccc',
      borderWidth: 3,
    }
  },
  icon: {
    image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
    anchor: 'bottom-center',
    size: [25, 34],
    clipOrigin: [459, 92],
    clipSize: [50, 68]
  }
});
const changeVisible = () => {
  labelOptions.value.visible = !labelOptions.value.visible;
}

const clickMap = (e: any) => {
  console.log('click map: ', e);
}
const initMap = (map: any) => {
  console.log('init map: ', map);
}

const clickMarker = () => {
  alert('点击了标号');
}

</script>

<style scoped>
.map-page-container{
  height: 500px;
}
</style>

效果图： 从效果图中可以看出el-amap-label-marker支持图标与文本同时配置对于文本仅限于基础的CSS样式效果，所以该组件比较适合简单的图片加文字的展示方式。

3、万级数量

对于已经达到万级数量的数据，这时候如果需要展示marker只适合展示基础的图标样式，如果需要展示全部的marker点的话推荐使用el-amap-mass-marks或者Loca组件中的el-amap-loca-icon组件，这两个组件的使用示例和方法可以查看文档。

• el-amap-mass-marks文档
• el-amap-loca-icon文档