腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3
腾讯地图的基础注册账号 展示地图等基础功能在专栏的上一篇内容 大家有兴趣可以去看一看
今天说的是腾讯地图的在稍微一点的基础操作 话不多说 直接上代码
var marker = ref(null)
var map
var center = ref(null)
// 地图初始化
const initMap = () => {//定义地图中心点坐标 center.value = new TMap.LatLng(30.589184, 114.29689)//定义map变量,调用 TMap.Map() 构造函数创建地图map = new TMap.Map(document.getElementById('container'), {center: center.value,//设置地图中心点坐标zoom: 6, //设置地图缩放级别mapStyleId: 'style1', //设置地图样式});//创建并初始化MultiMarkermarker = new TMap.MultiMarker({map: map, //指定地图容器//样式定义styles: {//创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)//将不同的作物指定为不同的样式myStyleOne: new TMap.MarkerStyle({"width": 25,"height": 35,"src": markImgOne,"anchor": { x: 16, y: 32 }}),myStyleTwo: new TMap.MarkerStyle({"width": 25,"height": 35,"src": markImgTwo,"anchor": { x: 16, y: 32 }}),myStyleThere: new TMap.MarkerStyle({"width": 25,"height": 35,"src": markImgThere,"anchor": { x: 16, y: 32 }}),},//点标记数据数组geometries: convertedPoints.value});console.log('坐标数据',convertedPoints.value);//初始化infoWindowvar infoWindow = new TMap.InfoWindow({map: map,position: new TMap.LatLng(39.984104, 116.307503),offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素,为了使其显示在Marker的上方});infoWindow.close();//初始关闭信息窗关闭//监听标注点击事件marker.on("click", function (evt) {if (iconClidk.value == true) {// console.log(evt, '点位点击信息');projectInfo.value = { id: '3', name: '湖北省公租房管理第三方评价项目 ·' + evt.geometry.properties.title, sonTask: evt.geometry.properties.num, problem: '1', headName: '王五', phone: "18337391968", }}//设置infoWindow// infoWindow.open(); //打开信息窗// infoWindow.setPosition(evt.geometry.position);//设置信息窗位置// //将信息与标记点关联起来// infoWindow.setContent(evt.geometry.properties.title);//设置信息窗内容// console.log(evt)})//移除控件缩放map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);// 移除比例尺控件map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);// 移除旋转控件map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);}
这个大家看起来都没有难度)(包含点位点击和弹框) 重要的是撒点位时的数据处理 和 图标类别的区分显示

这是后后端返回的数据 现在处理成想要的格式
const getLocationAndStatusFn = () => {let params = { projectId: projectId.value }getLocationAndStatus(params).then(res => {console.log(res, '获取各位置及状态'); if (res.code == 200 && res.data.length > 0) {console.log(res,'点位信息');positionArr.value = res.data
//点位数据convertedPoints.value = positionArr.value.map(item => {const [longitude, latitude] = item.position[0].split(',');// 设置已超时 已完成 进行中图标样式if (item.isOvertime == false) {if (item.status == '0' || item.status == '1' || item.status == '2' || item.status == '3') {styleIdValue.value = 'myStyleTwo'; // 根据status值设置样式} else if (item.status == '4' || item.status == '5') {styleIdValue.value = 'myStyleOne'; // 根据status值设置样式}} else { styleIdValue.value = 'myStyleThere';}// if(item.)return {id: item.district_id,styleId: styleIdValue.value, //这个用来区分显示不同的图标position: new TMap.LatLng(parseFloat(latitude), parseFloat(longitude)),properties: { //附带信息title: item.name,address: item.district,taskId: item.taskId,status: item.status}};});}})
}
最后处理完格式是这样的

处理完数据 大家可以看到我在第一张代码里定义了3中样式的图片 当时我刚写的时候 图片死活出不来 只会显示腾讯地图的默认的红色图标 最后找到解决办法
// 地图点位图标
import markImgOne from '@/assets/visualization/icon/01.png';
import markImgTwo from '@/assets/visualization/icon/02.png';
import markImgThere from '@/assets/visualization/icon/03.png';
你的点位图片要先引入才能使用
最后是设置中心点方法
//设置中心点城市
function setCenter(lat, lng, xiaoqu) {map.setCenter(new TMap.LatLng(lat, lng))if (xiaoqu == 1) {
//这个是设置地图的缩放层级map.easeTo({ zoom: 12 }, { duration: 2000 })} else if (xiaoqu == 0) {map.easeTo({ zoom: 7 }, { duration: 2000 })} else { map.easeTo({ zoom: 17 }, { duration: 2000 })}
}
最后看一下效果图

相关文章:
腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3
腾讯地图的基础注册账号 展示地图等基础功能在专栏的上一篇内容 大家有兴趣可以去看一看 今天说的是腾讯地图的在稍微一点的基础操作 话不多说 直接上代码 var marker ref(null) var map var center ref(null) // 地图初始化 const initMap () > {//定义地图中心点坐标…...
散列表:Word文档中的单词拼写检查功能是如何实现的?
文章来源于极客时间前google工程师−王争专栏。 一旦我们在Word里输入一个错误的英文单词,它就会用标红的方式提示“编写错误”。Word的这个单词拼写检查功能,虽然很小但却非常实用。这个功能是如何实现的? 散列别(Hash Table&am…...
智慧公厕蜕变多功能城市智慧驿站公厕的创新
随着城市发展的不断推进,对公共设施的便利性和智能化要求也日益提高。为满足市民对高品质、便捷、舒适的公共厕所的需求,智慧公厕行业的领航厂家广州中期科技有限公司,全新推出了一体化智慧公厕驿站。凭借着“高科技碳中和物联网创意设计新经…...
R语言清洗与处理数据常用代码段
去掉数据框df的某一列: # 删除不必要的变量 data$unnecessary_var <- NULL 选择需要的列进行读入数据框: # 选择需要的列 selected_cols <- c("col1", "col2", "col3") data <- fread("data.csv", s…...
centos 7.9 安装python 3.10的tls问题,
本地开发升级成了py3.10.6,服务器测试时安装py3.10.4 发现无法正常使用pip3 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. 印象中py3的高版本依赖高版本的openssl,centos 7下默认的openssl为1.0.x, 问题很简…...
pytorch,tf维度理解RNN
input_t input_t.squeeze(1) 这行代码用于从 input_t 中去除尺寸为1的维度。在深度学习中,经常会出现具有额外尺寸为1的维度,这些维度通常是为了匹配模型的期望输入维度而添加的。 在这里,input_t可能具有形状 (batch_size, 1, feature_dim…...
算法刷题-数组
算法刷题 209. 长度最小的子数组-二分或者滑动窗口 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度**。**如果不存在符合条件的子数…...
可视化数学分析软件 MATLAB R2021b mac中文版软件介绍
MATLAB R2021b mac作为数学类科技应用软件中首屈一指的商业数学软件,可以帮助您进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等,主要应用于工程计算、控制设计、信号处理与通讯、图像处理、信号检测、金融建模设计与分析等领域。…...
罗技摄像头左右翻转
需要下载驱动lws(我的是c310) LWS 罗技摄像头驱动下载 打开驱动程序,高级设置。有个镜像。...
【Linux】操作系统的认识
操作系统 1. 冯诺依曼体系结构2. 操作系统 1. 冯诺依曼体系结构 冯诺依曼体系结构的介绍 冯.诺依曼结构消除了原始计算机体系中,只能依靠硬件控制程序的状况(程序作为控制器的一部分,作为硬件存在),将程序编码存储在…...
【论文阅读】(2023TPAMI)PCRLv2
目录 AbstractMethodMethodnsU-Net中的特征金字塔多尺度像素恢复多尺度特征比较从多剪切到下剪切训练目标 总结 Abstract 现有方法及其缺点:最近的SSL方法大多是对比学习方法,它的目标是通过比较不同图像视图来保留潜在表示中的不变合判别语义ÿ…...
大数据学习(17)-mapreduce task详解
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博主哦ᾑ…...
HCIA --- DHCP服务、路由器、网络部署及基本配置
带宽计算公式: 速率 约等于 (带宽/8)*85% 网线分类: RJ-45双绞线 非屏蔽线 最佳距离100M; 民用 1000M/S 商用100000M/S 数字 光纤 光信号 RJ-11 电话线 模拟信号 同轴电缆 数字信号 光信号 数字信号--二进制 …...
手把手入门Node框架Egg.js
0.介绍 Egg.js 是一个面向企业级应用开发的 Node.js 框架,它建立在 Koa.js 之上,提供了一种更简单、灵活的开发方式。Egg.js 提供了一些默认约定和最佳实践,可以帮助开发者快速构建可靠、可扩展的应用程序。 基于 Koa.js:Egg.js …...
百度智能云推出,国内首个大模型全链路生态支持体系
在10月17日举行的百度世界2023上,百度智能云宣布,百度智能云千帆大模型服务平台已服务17000多家客户,覆盖近500个场景。 同时,新的企业和开发者还正在不断地涌入千帆,大模型调用量高速攀升。平台上既有年龄仅14岁的小…...
CUDA学习笔记(八)Branch Divergence and Unrolling Loop
Avoiding Branch Divergence 有时,控制流依赖于thread索引。同一个warp中,一个条件分支可能导致很差的性能。通过重新组织数据获取模式可以减少或避免warp divergence(该问题的解释请查看warp解析篇)。 The Parallel Reduction …...
Android MQTT连接阿里云使用Json解析数据
Android Studio 连接阿里云订阅主题然后使用JSON解析数据非常好用 导入MQTT的JAR包1、在项目中添加依赖然后使用Studio 去下载库2、直接下载JAR包,然后作为库进行导入 环境验证:给程序进行联网权限XML布局文件效果如下: MainActitive.java 主…...
生成二维码
Qt本地生成二维码-第三方库Libqrencode Chapter1 Qt本地生成二维码-第三方库Libqrencode一、功能简介二、本地生成二维码三、在线生成二维码 Chapter2 Qt生成二维码图片方法QRCode二维码简介如何选定QR码版本?主要方法(1) 下载qrencode源码(2) 将qrencode源码移植到…...
【C++入门 一 】学习C++背景、开启C++奇妙之旅
目录 1.什么是C2. C的发展史3. C的重要性3.1 语言的使用广泛度3.2 在工作领域1. 操作系统以及大型系统软件开发2. 服务器端开发3. 游戏开发4. 嵌入式和物联网领域5. 数字图像处理6. 人工智能7. 分布式应用 3.3 在校招领域3.3.1 岗位需求3.3.2 笔试题 4. 如何学习C4.1 别人怎么学…...
oracle 表空间详解以及配置操作
Oracle 数据库是由若干个表空间构成的。任何数据库对象在存储时都必须存储在某个 表空间中。表空间对应于若干个数据文件,即表空间是由一个或多个数据文件构成的。 1、常用表空间: 系统表空间 (system tablespace) 是每个 Oracle 数据库都必须具备的。…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
