高德地图信息窗体设置

news/2024/11/23 8:03:40/

1. 添加默认信息窗体

//构建信息窗体中显示的内容var info = [];info.push(`<div style="height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置:北京</div>`);info.push(`<div style="height: 36px; line-height: 20px; padding: 0px 20px; white-space:nowrap;">联系人:袁磊</div>`);this.infoWindow = new AMap.InfoWindow({content: info.join("") //使用默认信息窗体框样式,显示信息内容});// // getCenter() 获取地图中心点(数组)// this.infoWindow.open(this.aMap, this.aMap.getCenter());// 设置点坐标为窗体坐标;例:[123.40340954550922, 41.7334550336356]this.infoWindow.open(this.aMap, e.data.lnglat);

2. 使用自定义窗体(添加窗体)

//构建信息窗体中显示的内容var info = [];info.push(`<div style="height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置:北京</div>`);info.push(`<div style="height: 36px; line-height: 20px; padding: 0px 20px; white-space:nowrap;">联系人:袁磊</div>`);that.infoWindow = new AMap.InfoWindow({isCustom: true, //使用自定义窗体content: `<div style="background: #f00;">jdfghjdfihg</div><div class="close-btn" style="float: right;margin-top: 3px; margin-right: 5px;" onclick="closeInfoWindow()">X</div>`,offset: new AMap.Pixel(16, -45)});// // getCenter() 获取地图中心点(数组)// this.infoWindow.open(this.aMap, this.aMap.getCenter());// 设置点坐标为窗体坐标;例:[123.40340954550922, 41.7334550336356]that.infoWindow.open(that.aMap, e.data.lnglat);

3关闭自定义窗体(closeInfoWindow方法也要挂在window)

mounted() {window.closeInfoWindow = () => {this.aMap.clearInfoWindow();};},


http://www.ppmy.cn/news/1290618.html

相关文章

ZZULI-新冠疫苗接种信息管理系统

✅简介&#xff1a;与大家一起加油&#xff0c;希望文章能够帮助各位&#xff01;&#xff01;&#xff01;&#xff01; &#x1f4ac;保持学习、保持热爱、认真分享、一起进步&#xff01;&#xff01;&#xff01; 目录 ✅简介&#xff1a;与大家一起加油&#xff0c;希望文…

【docker】安装docker环境并启动容器

一、安装docker 这里以centos系统为例安装docker环境 # 删除已有安装包 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-enginesudo yum install -y yum-utils # 设置源 y…

Android App从备案到上架全过程

不知道大家注意没有,最近几年来,新的移动App想要上架是会非常困难的,并且对于个人开发者和小企业几乎是难如登天,各种备案和审核。但是到底有多难,或许只有上架过的才会有所体会。 首先是目前各大应用市场陆续推出新的声明,各种备案截止日期到12月就要到最后期限责令整改…

kafka容灾演练的方案

背景 kafka可以通过MirrorMaker工具把集群的数据从一个集群同步到另一个集群&#xff0c;通过在另一个数据中心创建灾备集群的方式可以做到容灾的效果,但是如果我们不通过如此重量级的工具也想达到容灾演练的目的&#xff0c;可以怎么做呢 kafka简单容灾实现 当原kafka集群发…

HackTheBox - Medium - Linux - Bagel

Bagel 今天我开始了《Red Team Development and Operations A Practical Guide》的学习&#xff0c;保持学习&#xff0c;后面差不多到时机后就学CRTOⅡ Bagel 是一款中等难度的 Linux 机器&#xff0c;其特点是电子商店容易受到路径遍历攻击&#xff0c;通过该攻击可以获取应…

MySQL5.7InnoDB简介

官网地址&#xff1a;MySQL :: MySQL 5.7 Reference Manual :: 14.1 Introduction to InnoDB 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. MySQL 5.7 参考手册 / InnoDB 存储引擎 / InnoDB 简介 14.1 InnoDB…

Vue.js 中使用 Watch 选项实现动态问题判断与展示答案

组件结构 以下是组件的基本结构&#xff1a; <template><div><!-- 输入框&#xff0c;用于输入问题 --><p>提出一个是/否问题&#xff1a;<input v-model"question" :disabled"loading" /></p><!-- 显示答案 --&…

阿里云服务器8080端口安全组开通图文教程

阿里云服务器8080端口开放在安全组中放行&#xff0c;Tomcat默认使用8080端口&#xff0c;8080端口也用于www代理服务&#xff0c;阿腾云atengyun.com以8080端口为例来详细说下阿里云服务器8080端口开启教程教程&#xff1a; 阿里云服务器8080端口开启教程 阿里云服务器8080端…