vue 高德地图api爬坑之路（四）自定义infoWindow信息窗体

最新推荐文章于 2024-10-03 15:26:35 发布

小C_cao

最新推荐文章于 2024-10-03 15:26:35 发布

阅读量5.4k

点赞数 5

文章标签： vue 高德地图

本文链接：https://blog.csdn.net/as849167276/article/details/108708746

版权

本文记录了在Vue项目中使用高德地图API实现自定义infoWindow信息窗体的过程，由于官方示例难以满足处理点击事件的需求，作者通过参考他人文章，提供了更完整的代码示例。主要内容包括编写原因、组件页面的设计以及地图页面的部分代码实现。

摘要由CSDN通过智能技术生成

编写原因

官方信息窗体的demo是html的，content内容为html即可，但由于信息窗体描述点开后，需要处理点击事件。百度查了好一会vue实现infoWindow，都因代码不全，或其他原因。不方便直接使用，所以借鉴了篇文章后，给出全一点点的代码。
借鉴的文章：https://blog.csdn.net/qq493820798/article/details/105403046
效果图：
在这里插入图片描述
不擅长写样式，样式自己修改。

组件页面

<template>
  <div>
    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
      <div id="del-div">
        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
      </div>
      <div style="text-align: center;">
        <h4>详 情</h4>
      </div>
      <p v-if="isInfo">部署 : 测试一下</p>
      <p v-if="isInfo"