Vue结合高德地图实现HTML写自定义信息弹窗

最新推荐文章于 2024-09-27 17:11:22 发布

呈两面包夹芝士

最新推荐文章于 2024-09-27 17:11:22 发布

阅读量3.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue3.0 文章标签：前端 javascript

本文链接：https://blog.csdn.net/Macao7_W/article/details/127846042

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息，弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗，可给出的大多数都是通过JS写HTML结构，我感觉这种不仅不好布局，而且可读性和维护性都不如直接写HTML好。于是我就在想，能不能在HTML里写这个弹窗呢？

答案是：能！

效果图如下：
在这里插入图片描述

先说下思路吧，通过看高德地图官方文档关于InfoWindow的介绍，可以看出信息弹窗的显示内容，可以是HTML要素字符串或者HTMLElement对象。于是我就想到了在Vue里不是可以通过this.$refs获取元素的DOM节点吗？然后我就开始了第一次尝试。

在这里插入图片描述
先看下后台返回的数据类型：

      data: [
        {
   
   
          id: '1', //id
          projectName: 'xxxx项目', //项目名称
          address: '山东省济南市市中区xxxxxxxxxx', //项目地址
          sketchMapUrl: '116.998232,36.651352', //项目坐标
          startDate: '2022-06-18', //计划开始日期
          completedDate: '2022-11-18', //计划结束日期
          progress: '78', //施工进度
          buildPeople: '32', //施工人员
          alarmNum: '8' //告警信息数目
        },{
   
   
          id: '2', //id