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

Python配置镜像源

Python3安装pika的准备 Windows下配置镜像源可以按照如下操作。 1.winR执行%APPDATA% %APPDATA%后,创建pip文件夹,并创建pip.ini配置文件 查看此目录下是否有pip目录,如果没有则需要创建,并在pip目录下以文本方式添加pip.ini文件…

Node学习笔记之fs模块

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

maven以及配置

oss oss配置 <!--oss--> <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.6.0</version></dependency> lombok <!--lombok--><dependency><gro…

什么是工程化思维

什么是工程化思维&#xff1f; 工程化思维&#xff08;Engineering Thinking&#xff09;是一种解决问题和做决策的方法&#xff0c;它强调系统性、逻辑性和效率。这种思维方式在工程学和其他技术领域中尤为常见&#xff0c;但其实它可以应用于生活的各个方面。以下是工程化思…

Telent

Telnet协议是一种远程登录协议&#xff0c;它允许用户通过网络连接到远程主机并在远程主机上执行命令。 Telnet协议是TCP/IP协议族中的一员&#xff0c;是Internet远程登录服务的标准协议和主要方式。它为用户提供了在本地计算机上完成远程主机工作的能力。在终端使用者的电脑…

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 与传参方式

一、 背景&#xff1a; 在使用 Jmeter 进行接口测试时&#xff0c;有些小伙伴不知道 Headers 和请求参数 (Parameters&#xff0c;Body Data) 的联系&#xff0c;本文主要讲 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 打开题目&#xff0c;查看js源码 直接搜flag 把那三行代码复制到控制器&#xff0c;得到flag NSS_HTTP_CHEKER 都是http请求基本知识 抓包按照…

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

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

驱动开发day4

通过字符设备驱动的分步实现编写LED驱动&#xff0c;另外实现设备文件和驱动的绑定 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; }…

linux驱动开发学习001:概述

linux的内核源码编译后&#xff0c;会生成一个总的镜像。镜像加载到内存中运行他&#xff0c;就会启动内核。驱动属于内核代码的一部分&#xff0c;对驱动修改要重编整个内核&#xff0c;麻烦但驱动可以独立于内核镜像外&#xff0c;并能动态加载和卸载字符设备驱动&#xff0c…

RHCE---Shell基础 2

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

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

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

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

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

日常代码优化实现过程

实现方案一 判断逻辑支持跳过。 handleCheckStatus ({ status true, paymentApplyStatus true, writeOffStatus true }) {// 单据状态if (status && this.selectedRows.filter(item > item.status ! AUDITED).length) {this.$antdMessage.warning(请选择 [已审…