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

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架