@vuemap/vue-amap高德vue组件库常用技巧(三)

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

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

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

单信息框显示

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

html 复制代码
<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实现。只是信息框会多一些预置的事件和效果。 模拟的示例如下:

html 复制代码
<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组件模拟出需要的信息框,可以实现页面上多信息框的展示。

相关推荐
我要洋人死11 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人22 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人23 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香30 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969333 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai38 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#