高德地图鼠标经过点标记显示信息窗体

创建点标记：
实例化信息窗体
放入鼠标移入/移出事件

源码：

// 获取站点
getData() {api.stationMap(this.params).then((res) => {console.log(res);if (res.code === 0) {console.log("电站覆盖：", res.data);const that = this;const infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30),});this.markers = res.data.map((item) => {let marker = new AMap.Marker({position: item.location,offset: new AMap.Pixel(-10, -30),});marker.on("click", function (e) {console.log(e);that.equipmentModel = true;that.equipmentModelData = item;});marker.on("mouseover", function (e) {console.log(e);infoWindow.setContent(`<div class="description"><h5 class="title">${item.name}</h5><div class="mt-3 detail">设备：${item.total}个<br />在线：${item.onLine}个<br />离线：${item.offLine}个<br />使用中：${item.inUse}个<br /></div></div>`);infoWindow.open(that.map, item.location);});marker.on("mouseout", function (e) {console.log(e);infoWindow.close(that.map, item.location);});return marker;});this.map.add(this.markers);}});
},

高德地图鼠标经过点标记显示信息窗体相关推荐

高德地图点标记及信息窗体的使用
项目背景:要做一个数据大屏,需要用到地图以及点标记,UI大致是这样: 我是结合vue使用的,vue调用高德地图有一个组件是vue-amap,基于vue2.0和高德地图的我是后端开发,vue是才上手, ...
高德地图-鼠标获取坐标
1.问题背景鼠标点击地图,获取点击处的经纬度,并将经度和纬度放到输入框中 2.实现源码 <!DOCTYPE html> <html><head><meta ...
高德地图与CAD图叠加显示方法汇总及优缺点分析
前言高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
高德地图截屏、标记鼠标跟随示例
最近开发中用到了高德地图,需要截屏功能,以下有两种方法实现. 1) 通过html2canvas.js将页面转为图片,此种方法十分方便可实现一键自动截屏功能,但是生产环境中使用的地图版本较低, 会出现鼠 ...
高德地图鼠标点击后地图上点标记跟着变化
高德地图marker 类中有方法 setPosition 只要在点击地图的时候将地图经纬度传递到该方法中即可另外,主要查看官方手册中关于marker类的介绍 marker介绍 draggable ...
高德地图多状态业务自适应显示多个点标记
多个状态业务点在地图上展示,参考了高德地图自适应显示多个点标记,大致上差不多,但是要修改成自己的业务. 1.直接copy高德地图的自适应显示多个点标记html代码,把key修改成自己申请的: 2.下面 ...
高德地图教程_poi搜索以及显示
最近打算高仿深圳通的应用,UI已经做好了,我看过APP的查询接口,断了网也可以查询这就表明数据是保存在数据库,或者就是第一次联网,就在网站将数据全部下好了.我就想干脆用地图提供的查询吧. 以前是接触的 ...
高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...

高德地图鼠标经过点标记显示信息窗体

高德地图鼠标经过点标记显示信息窗体相关推荐

最新文章

热门文章