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

本文记录了在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"
  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值