腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配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 })}
}

最后看一下效果图

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

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

相关文章

Mysql数据库 3.SQL语言 DML数据操纵语言 增删改

DML语句:用于完成对数据表中数据的插入、删除、修改操作 一.表数据插入 插入数据语法: 步骤例: 1.声明数据库:use 数据库名; 2.删除操作:drop table if exists 表名; 3.创建数据库中的表:create table 表…

Java,回形数

回形数基本思路: 用不同的四个分支分别表示向右向下向左向上,假如i表示数组的行数,j表示数组的列数,向右向左就是控制j的加减,向上向下就是控制i的加减。 class exercise {public static void main(String[] args){//回…

【AOA-VMD-LSTM分类故障诊断】基于阿基米德算法AOA优化变分模态分解VMD的长短期记忆网络LSTM分类算法(Matlab代码)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Node学习笔记之fs模块

fs 全称为 file system ,称之为 文件系统 ,是 Node.js 中的 内置模块 ,可以对计算机中的磁盘进行操 作。 本章节会介绍如下几个操作: 文件写入文件读取文件移动与重命名文件删除文件夹操作查看资源状态 一、文件写入 文件写入就…

CAPL如何实现27服务解锁

在文章《CANoe-如何实现27服务解锁》里,我们介绍了诊断控制台中如何实现27解锁,如果我想在CANoe中使用CAPL程序解锁的话,又要如何实现呢? CAPL脚本也是通过模拟手动操作来实现27解锁,所以步骤为: 发送10 03发送27 01接收67 01,获取seed值根据seed值和算法,计算出key值…

http post协议实现简单的rpc协议,WireShark抓包分析

文章目录 1.http 客户端-RPC客户端1.http 服务端-RPC服务端3.WireShark抓包分析3.1客户端到服务端的HTTP/JSON报文3.2服务端到客户端的HTTP/JSON报文 1.http 客户端-RPC客户端 import json import requests# 定义 RPC 客户端类 class RPCClient:def __init__(self, server_url…

ZYNQ linux调试LCD7789

一,硬件管脚 1,参数解释和实物 LVGL是一个开源的图形库,主要用于MCU上屏幕UI的部署,功能完善,封装合理,可裁切性强,也可以实现Linux上fbx的部署。LVGL官网LVGL - Light and Versatile Embedded Graphics Library 每根线的作用

接口测试 Jmeter 接口测试 —— 请求 Headers 与传参方式

一、 背景: 在使用 Jmeter 进行接口测试时,有些小伙伴不知道 Headers 和请求参数 (Parameters,Body Data) 的联系,本文主要讲 Content-Type 为 application/x-www-form-urlencoded 和 application/json 的场景。 1、使用 Parame…

[SWPUCTF 2023 秋季新生赛] web题解

文章目录 colorful_snakeNSS_HTTP_CHEKER一键连接!ez_talkPingpingpingUnS3rialize查查needIf_elseRCE-PLUSbackup colorful_snake 打开题目,查看js源码 直接搜flag 把那三行代码复制到控制器,得到flag NSS_HTTP_CHEKER 都是http请求基本知识 抓包按照…

如何保养维护实验室超声波清洗机

实验室是用于各个行业产品的研发以及检验的场所,所以对其中所使用的各种物品都有着极高的要求,因此只有品类齐全的实验室超声波清洗机能够满足实验室对于清洁以及其他方面的一些需求,但是要想实验室超声波清洗机设备的性能能够始终如一&#…

驱动开发day4

通过字符设备驱动的分步实现编写LED驱动,另外实现设备文件和驱动的绑定 head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct {unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int IDR;unsigned int ODR; }…

RHCE---Shell基础 2

文章目录 目录 文章目录 前言 一.变量 概述 定义 自定义变量 环境变量 概述: 定义环境变量: 位置变量 "$*"会把所有位置参数当成一个整体(或者说当成一个单词 变量的赋值和作用域 read 命令 变量和引号 变量的作用域 变…

【茫茫架构路】1. Class File字节码文件解析

本文所有内容的JDK版本为 OpenJDK 11 JDK11 Class File官方说明。 Java解析字节码文件源码参考,以下为部分字节码解析源码展示。 public ClassFile(DataInputStream in) {try {//magic: 0xCAFEBABEthis.magic ClassReader.readInt(in);System.out.println("m…

高等数学啃书汇总重难点(五)定积分

最近都在忙着刷题,尤其是政治和英语也开始加量复习了,该系列断更了将近2个月~不过最近在刷题的时候又遇到一些瓶颈,因此回归基础来整理一下知史点~ 总的来说,虽然第五章也是重中之重,定理数量也很多,但&…

C语言每日一题(17)老人的数目

力扣 2678 老人的数目 给你一个下标从 0 开始的字符串 details 。details 中每个元素都是一位乘客的信息,信息用长度为 15 的字符串表示,表示方式如下: 前十个字符是乘客的手机号码。接下来的一个字符是乘客的性别。接下来两个字符是乘客的…

JMeter添加插件

一、前言 ​ 在我们的工作中,我们可以利用一些插件来帮助我们更好的进行性能测试。今天我们来介绍下Jmeter怎么添加插件? 二、插件管理器 ​ 首先我们需要下载插件管理器jar包 下载地址:Install :: JMeter-Plugins.org 然后我们将下载下来…

MYSQL(事务+锁+MVCC+SQL执行流程)理解

一)事务的特性: 一致性:主要是在数据层面来说,不能说执行扣减库存的操作的时候用户订单数据却没有生成 原子性:主要是在操作层面来说,要么操作完成,要么操作全部回滚; 隔离性:是自己的事务操作自己的数据,不会受到到其…

Centos 7 Zabbix配置安装

前言 Zabbix是一款开源的网络监控和管理软件,具有高度的可扩展性和灵活性。它可以监控各种网络设备、服务器、虚拟机以及应用程序等,收集并分析性能指标,并发送警报和报告。Zabbix具有以下特点: 1. 支持多种监控方式:可…

向量检索库Milvus架构及数据处理流程

文章目录 背景milvus想做的事milvus之前——向量检索的一些基础近似算法欧式距离余弦距离 常见向量索引1) FLAT2) Hash based3) Tree based4) 基于聚类的倒排5) NSW(Navigable Small World)图 向…

mysql—面试50题—1

注:面试50题将分为5个部分,每部分10题 一、查询数据 学生表 Student create table Student(SId varchar(10),Sname varchar(10),Sage datetime,Ssex varchar(10)); insert into Student values(01 , 赵雷 , 1990-01-01 , 男); insert into Student …