vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件

效果图
在这里插入图片描述
划过散点的时候出现每个三点位置的数据提示
在这里插入图片描述
点击具体散点获取展示信息弹框,并为其添加点击事件
在这里插入图片描述
注意点:
1 即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,
(原因:这是因为你的弹窗内容是以字符串的形式插入到 DOM 中的。此时你给它添加的点击事件不会被 Vue 的事件监听系统所识别和处理,因为这是在 Vue 的作用范围之外的。但是,如果你把这个函数挂载到 window 对象上,那么无论在哪个地方调用这个函数,浏览器都能找到并且执行它)。

2 并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函数。
3 设置信息窗体,并为信息窗体里的函数添加点击事件。
处理过程:
1 给每一个 infowindow 加上一个类名,然后进行绑定事件,
2 高德地图 infowindow 不会马上就渲染出来,只有点击 marker 之后才会生成
3 所以需要在生成 infowindow 后才能绑定事件

在这里插入图片描述
在这里插入图片描述

代码实现

<template><div><div class="top-box"><Title title="煤矿地理分布图" /><seachIpt @clickSearch="clickSearch" /></div><div class="map-box" v-loading="loading"><div class="icon"><span @click="postMine('container')" class="left-back">返回主地图</span><span class="iconfont icon-a-zujian28421" @click="handleFullScreen"></span></div><div ref="chinaMap" id="container" class="map-content"></div><leftMark /></div></div><mapDialog v-model:value="show" />
</template><script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import LabelsData from './china'
import Title from '../title.vue'
import leftMark from './left-mark.vue'
import seachIpt from './seachIpt.vue'
import { ElMessage } from 'element-plus'
import { postMineInfo } from '@/api/dashboard/index'
import mapDialog from './mapDialog.vue'
import { useRouter } from 'vue-router'
let show = ref(false)
let infoWindow = ref(null)
const handleFullScreen = () => {infoWindow.value?.close()show.value = true
}//搜索
const clickSearch = (v: string) => {getMineInfo(v)
}//获取该煤矿信息
let dataList = ref([])
const getMineInfo = (v: string) => {infoWindow.value = nullpostMineInfo({ mineName: v, region: 1 }).then((res: any) => {const { data, success } = resif (success) {if (data?.length > 0) {//构建信息窗体中显示的内容dataList.value = data[0]var info = []info.push(`<div style='font-size: 16px;'><div style=' display: flex;align-items: center;justify-content: space-between;margin-bottom:8px ;padding-bottom:4px; border-bottom: 1px solid #eeeeee;'><el-tooltip class="box-item" effect="dark" :content="${data[0].mineName}" placement="top"><span class="left-title" style="color: #3076fe; cursor: pointer;" data-id="moreIds" onclick="more(event)">${data[0].mineName}</span></el-tooltip></div><div class="content"><div style='display: flex;line-height: 30px;'><span style='text-align: right;width: 129px;color: #707070;'>所属片区: </span><span style='width: 206px;color: #262626;'>${data[0].zmjArea || '--'}</span></div><div style='display: flex;line-height: 30px;'><span style='text-align: right;width: 129px;color: #707070;'>煤矿位置: </span><span style='width: 206px;color: #262626;'>${data[0].province ||data[0].city ||data[0].region ||data[0].orgAddress? (data[0].province ? data[0].province : '') +(data[0].city ? data[0].city : '') +(data[0].region ? data[0].region : '') +(data[0].orgAddress ? data[0].orgAddress : ''): '--'}</span></div><div style='display: flex;line-height: 30px;'><span style='text-align: right;width: 129px;color: #707070;'>煤矿性质: </span><span style='width: 206px;color: #262626;'>${data[0].mineProperty || '--'}</span></div><div style='display: flex;line-height: 30px;'><span style='text-align: right;width: 129px;color: #707070;'>核定生产能力: </span><span style='width: 206px;color: #262626;'>${data[0].actualProductCapacity || '--'}${data[0].actualProductCapacity ? '万吨' : ''}</span></div><div style='display: flex;line-height: 30px;'><span style='text-align: right;width: 129px;color: #707070;'>是否ZMJ客户: </span><span style='width: 206px;color: #262626;'>${data[0].customer === 1 ? '是' : '否'}</span></div></div></div>`)infoWindow.value = new AMaps.value.InfoWindow({anchor: 'top-left',content: info.join('') //使用默认信息窗体框样式,显示信息内容})let amplify = ref(0)if (data[0].zmjArea !== '国际') {amplify.value = 10} else {amplify.value = 5}infoWindow.value.open(map.value, [data[0].longitude, data[0].latitude])map.value.setZoomAndCenter(amplify.value, [data[0].longitude, data[0].latitude])} else ElMessage.error('暂未查到该煤矿信息')} else {ElMessage.error(res.message)}}).catch((err) => {console.log(err)})
}const chinaMap = ref()
let AMaps = ref(null)
let map = ref(null)let normalMarker = ref(null)
let labelsLayer = ref(null)
let markers = ref([])
const imgList = ref([new URL(`@/assets/home/blue-mark.png`, import.meta.url).href,new URL(`@/assets/home/green-mark.png`, import.meta.url).href
])onActivated(() => {postMine('container')
})const router = useRouter()
const toMineDetails = (val:any ) => {router.push({name: 'mineBasicInfoDetail',params: { model: val?.mineName },query: { id: val?.mineId, projectName: val?.mineName }})
}let loading = ref(false)
//获取煤矿地理坐标
const postMine = (dom: any) => {loading.value = truepostMineInfo({ region: 1 }).then((res: any) => {const { data, success } = resif (success) {initMap(data, dom)} else {initMap([], dom)}}).catch(() => {initMap([], dom)}).finally(() => {loading.value = false})
}
//初始化地图加载
const initMap = (data: any, dom: any) => {const AMapLoad = ref<any>(AMapLoader)// map.value && map.value.destroy()AMapLoad.value.load({key: '337c7e7dda33e11839f80aa219f2fc8a', // 申请好的Web端开发者Key,首次调用 load 时必填// version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.DistrictSearch','AMap.DistrictLayer','AMap.Map','AMap.Polygon','AMap.LabelsLayer','AMap.LabelMarker','AMap.Marker'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等AMapUI: {//重点就是这个version: '1.0',plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker'] //SimpleMarker设置自定义图标,PathSimplifier轨迹展示组件}}).then((AMap: any) => {AMaps.value = AMapmap.value = new AMap.Map(dom, {layers: [// disWorld,],// resizeEnable: true,viewMode: '3D',zIndex: 5,zoom: 3,zoomEnable: true, //地图是否可缩放dragEnable: true, // 地图是否可通过鼠标拖拽平移rotateEnable: false, // 地图是否可旋转// mapStyle: 'amap://styles/10f9d1d306dec0990c6048597ab3bfcb',zooms: [4.3, 20], // 缩放级别范围center: [105.602725, 37.076636],defaultCursor: 'pointer', // 地图默认鼠标样式showLabel: true, // 是否展示地图文字和 POI 信息。showIndoorMap: false, // 是否自动展示室内地图,默认是 falsefeatures: ['bg', 'building', 'road', 'point']})const _window = window as anynextTick(()=>{_window.more = (event:any) => {const e = event.currentTargetconst element = e.getAttribute('data-id')toMineDetails(dataList.value)}})// DistrictExplorer_fn(AMap) // 下钻//地图加载完成事件map.value.on('complete', () => {var layer = new AMap.LabelsLayer({// 开启标注避让,默认为开启,v1.4.15 新增属性collision: false,// 开启标注淡入动画,默认为开启,v1.4.15 新增属性animation: false})for (var i = 0; i < LabelsData.length; i++) {LabelsData[i].text.style = {fillColor: '#777c82'}var labelsMarker = new AMap.LabelMarker(LabelsData[i])layer.add(labelsMarker) // 省份文字}map.value.add(layer)markers_fn(data, AMap) // 散点})map.value.on('click', (e: any) => {map.value.clearInfoWindow()})}).catch((e: any) => {console.error(e) //加载错误提示}).finally(() => {loading.value = false})
}
//散点标记
const markers_fn = (data: any, AMap: any) => {normalMarker.value = new AMap.Marker({anchor: 'bottom-center',offset: [0, 0]})labelsLayer.value = new AMap.LabelsLayer({zooms: [4.3, 20],zIndex: 200,// 关闭标注淡入动画collision: false,// 设置 allowCollision:true,可以让标注避让用户的标注allowCollision: false})map.value.add(labelsLayer.value)let icon = {type: 'image',anchor: 'bottom-center'}markers.value = []data.forEach((item: any, i: number) => {let labelMarker = new AMap.LabelMarker({title: `${item.mineName}-${item.mineId}`,position: [item.longitude, item.latitude],zIndex: item.customer === 1 ? 20 : 16,icon: {image: item.customer === 1 ? imgList.value[0] : imgList.value[1],...icon}})markers.value.push(labelMarker)labelMarker.on('mouseover', function (e: any) {let strArr = e.data.data.name.split('-')let position = e.data.data && e.data.data.positionlet pixel = e.pixelnormalMarker.value.setContent(`<div class="amap-info-window" style="top:${pixel.y}px;left:${pixel.x}px;">${strArr[0]}<div class="amap-info-sharp"></div></div>`)normalMarker.value.setPosition(position)map.value.add(normalMarker.value)})labelMarker.on('mouseout', function () {map.value.remove(normalMarker.value)})labelMarker.on('click', function (e: any) {let strArr = e.data.data.name.split('-')getMineInfo(strArr[0])})})labelsLayer.value.add(markers.value)
}
</script><style scoped lang="scss">
@import './map.scss';
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TMC2209驱动模式详解

TMC2209驱动模式详解 1.TMC2209封装2.TMC2209引脚定义 1.TMC2209封装 2.TMC2209引脚定义

雅思词汇及发音积累 2024.6.24

delve /delv/ vi.钻研&#xff1b;探究&#xff1b;挖 elicit /ɪˈlɪsɪt/ v.引出&#xff0c;得到&#xff1b;<古>使&#xff08;潜在的东西&#xff09;显现&#xff0c;诱出 regent /ˈriːdʒənt/ n.摄政王&#xff1b;摄政者&#xff1b;州立大学董事会董事…

TailwindCss Vue3 Vite4 安装配置

TailwindCss Vue3 Vite4 安装配置 官方文档 环境 Vue3 Vite4 步骤 1. 创建项目 如果已经有项目&#xff0c;不需要这个步骤 npm create vitelatest my-project -- --template vue cd my-project2. 安装TailwindCss 安装 tailwindcss 和同级的依赖&#xff0c;创建tailw…

JavaWeb系列十五: JavaWeb三大组件之过滤器Filter

老韩-JavaWeb三大组件之过滤器Filter 过滤器说明过滤器基本原理过滤器分析和实例url-patternFilter生命周期FilterConfigFilterConfig应用实例过滤器链基本原理分析过滤链实例演示过滤链注意事项 过滤器作业布置 过滤器说明 过滤器说明 Filter 过滤器是JavaWeb三大组件之一(Se…

Android AOSP 编译并烧录到Google Pixel4XL

简介 AOSP&#xff08;Android Open Source Project&#xff09;是Android系统的开源版本&#xff0c;任何人都可以下载、编译和修改。手头上有一台Pixel 4XL&#xff0c;尝试编译AOSP并将其烧录到的设备上。 准备工作 在开始之前&#xff0c;您需要确保您的电脑满足以下条件…

实验08 软件设计模式及应用

目录 实验目的实验内容一、能播放各种声音的软件产品Sound.javaDog.javaViolin.javaSimulator.javaApplication.java运行结果 二、简单工厂模式--女娲造人。Human.javaWhiteHuman.javaYellowHuman.javaBlackHuman.javaHumanFactory.javaNvWa.java运行结果 三、工厂方法模式--女…

Python爬虫项目集:豆瓣电影排行榜top250

关于整理日常练习的一些爬虫小练习&#xff0c;可用作学习使用。 爬取项目以学习为主&#xff0c;尽可能使用更多的模块进行练习&#xff0c;而不是最优解。 爬虫概要 示例python 库爬取模块request解析模块BeautifulSoup存储类型list&#xff08;方便存入数据库&#xff09…

2024年最新 Windows 操作系统安装部署 MongoDB 数据库详细教程(更新中)

MongoDB 概述 MongoDB 是一个基于分布式文件存储的开源数据库系统&#xff0c;由C语言编写&#xff0c;旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系…

数据库SqlServer笔试题

相关面试题 redis安装说明书 http://t.csdnimg.cn/iM260 单体并发瓶颈 redis sqlsever mysql多少 http://t.csdnimg.cn/DTXIh Redis高频面试题http://t.csdnimg.cn/FDOnv 数据库SqlServer笔试题 数据库SqlServer笔试题-CSDN博客 SQL 大数据查询如何进行优化&#xff1f;sqlser…

深入探索:Spring JdbcTemplate的数据库访问之歌

介绍 在当今的企业应用程序开发中&#xff0c;与数据库进行交互是至关重要的一环。Spring框架为我们提供了多种方式来简化数据库访问&#xff0c;其中之一就是Spring JdbcTemplate。 Spring JdbcTemplate是Spring框架中的一个核心模块&#xff0c;它提供了一种优雅的方式来使…

使用mysql的binlog进行数据恢复

1.mysql安装环境 在你本地电脑windows上建一个和生产环境一样的mysql版本 我的是 mysql5.7.43 安装教程可以自行上网搜&#xff08;这里不做介绍&#xff09; 可参考&#xff1a; 1.1安装路径 我的mysql安装路径&#xff1a; D:\mysql\mysql-5.7.43-winx64\bin * 1.2my.in…

Docker部署私有仓库(registryHarbor)

简介Docker Hub 官方仓库 在 Docker 中&#xff0c;当我们执行 docker pull xxx 的时候 &#xff0c;它实际上是从 registry.hub.docker.com 这个地址去查找&#xff0c;这就是Docker公司为我们提供的公共仓库。在工作中&#xff0c;我们不可能把企业项目push到公有仓库进行管理…

并查集 Rank 的优化

并查集 Rank 的优化 并查集是一种数据结构,用于处理一些不交集的合并及查询问题。它支持两种操作:查找(Find)和合并(Union)。查找操作用于确定某个元素属于哪个子集,而合并操作用于将两个子集合并成一个集合。在并查集中,每个子集用一棵树来表示,树根的元素作为该子集…

讲座学习截图——《CAD/CAE/CAM几何引擎-软件概述》(一)

目录 引出CAD/CAE/CAM几何引擎-软件概述 郝建兵CADCAECAM 几何模型内核ACIS 两个老大之一Open CascadeParasolid 两个老大之一Autodesk的内核 总结其他自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式…

每天一个数据分析题(三百八十四)- 回归与分类

关于回归与分类问题的讨论不正确的是&#xff1a; A. 回归问题的目标变量通常是连续的数值变量&#xff0c;而分类问题的目标变量通常是离散的分类变量 B. 回归问题和分类问题同属于有监督学习范畴 C. 回归问题最常用的评价指标体系有混淆矩阵以及ROC曲线 D. 回归问题的常见…

02_RISC-V RTOS系统移植及启动

系统移植&#xff1a; https://so.csdn.net/so/search?spm1001.2100.3001.4498&qRISCV%E7%A7%BB%E6%A4%8DRT-Thread&t&uRT-thread移植指南-RISC-V&#xff1a;https://blog.csdn.net/ty1121466568/article/details/120455709riscv cpu 移植 rt-thread 需要考虑的…

C/C++ 类型转换

char* 转 string const char *name "hello"; String Str name;Serial.printf("%s\n", Str); string 转 char* String str "hello"; char *p (char *)str.c_str();Serial.printf("%s\n", p); char *转 char[] const char *str …

设置Nginx缓存策略

详细信息 Nginx服务器的缓存策略设置方法有两种&#xff1a;add_header或者expires。 1. add_header 1&#xff09;语法&#xff1a;add_header name value。 2&#xff09;默认值&#xff1a;none。 3&#xff09;使用范围&#xff1a;http、server、location。 配置示例…

双目相机测距原理

一、普通双目相机测距原理 普通双目相机具有如下特点&#xff1a;左右两个相机位于同一平面&#xff08;光轴平行&#xff09;&#xff0c;且相机参数&#xff08;焦距f&#xff09;一致。其原理图如下&#xff1a; 如图所示&#xff0c;P点为相应的物体位置&#xff0c;CL和C…

【等保】网络安全等级保护(等保2.0PPT)

等保2.0&#xff08;网络安全等级保护基本要求的第二代标准&#xff09;的推出和实施&#xff0c;是基于多方面的考虑和需求。以下是实施等保2.0的主要原因&#xff1a; 加强网络安全保护&#xff1a; 随着网络技术的不断发展和网络威胁的不断增加&#xff0c;传统的网络安全保…