Vue3 引入腾讯地图 包含标注简易操作

1. 引入腾讯地图API

JavaScript API | 腾讯位置服务 (qq.com)

首先在官网注册账号 并正确获取并配置key后  找到合适的引入方式  本文不涉及版本操作和附加库   据体引入参数参考如下图

具体以链接中官方参数为准标题

 

在项目根目录 index.html 中 写入如下代码

<!-- 引入腾讯地图 -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>

  粘贴后key替换为自己的key

2. 创建容器

<div class="map_container" ref="mapRef"></div>
.map_container {width: 500px;height: 500px;position: relative;// 阻止复制-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE/Edge */user-select: none; /* 标准语法 */
}

 

3. 渲染地图

<script setup>
import { nextTick, ref, onMounted } from 'vue';onMounted(() => {// 渲染地图nextTick(() => {initMap();});
});// 经纬度
const formData = ref({lat: 39.98412,lng: 116.307484,
})// 地图实例
let map = null// marker图层
let markerLayer = null// 初始化地图
const mapRef = ref(null)
const TMap = window.TMap
const initMap = () => {//定义地图中心点坐标const mapCenter = new TMap.LatLng(formData.value.lat, formData.value.lng)map = new TMap.Map(mapRef.value, {center: mapCenter, //设置地图中心点坐标zoom: 17, //设置地图缩放级别pitch: 0, //设置俯仰角rotation: 0, //设置地图旋转角度viewMode: '2D'})// 以下代码按需添加// 移除logo以及左下角信息// let logoInfo = document.querySelector('canvas+div:last-child')// logoInfo.style.display = 'none'// 禁止拖拽// map.setDraggable(false);// 禁止缩放// map.setScrollable(false);//移除控件缩放// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);// 移除比例尺控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);// 移除旋转控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);}
</script>

4. 点击地图  添加单个标注

添加多个标注只需删除以下函数即可

markerLayer.setGeometries([])

示例代码: 

<script setup>
import { nextTick, ref, onMounted } from 'vue';onMounted(() => {// 渲染地图nextTick(() => {initMap();});
});// 经纬度
const formData = ref({lat: 39.98412,lng: 116.307484,
})// 地图实例
let map = null
// marker图层
let markerLayer = null
// 初始化地图
const mapRef = ref(null)
const TMap = window.TMap
const initMap = () => {//定义地图中心点坐标const mapCenter = new TMap.LatLng(formData.value.lat, formData.value.lng)map = new TMap.Map(mapRef.value, {center: mapCenter, //设置地图中心点坐标zoom: 17, //设置地图缩放级别pitch: 0, //设置俯仰角rotation: 0, //设置地图旋转角度viewMode: '2D'})// 以下代码按需添加// 移除logo以及左下角信息// let logoInfo = document.querySelector('canvas+div:last-child')// logoInfo.style.display = 'none'// 禁止拖拽// map.setDraggable(false);// 禁止缩放// map.setScrollable(false);//移除控件缩放// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);// 移除比例尺控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);// 移除旋转控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);//初始化marker图层markerLayer = new TMap.MultiMarker({map: map})addMarker()map.on('click', clickHandler)
}// 地图点击事件
const clickHandler = (event) => {const { lat, lng } = event.latLngformData.value.lat = String(lat).slice(0, 8)formData.value.lng = String(lng).slice(0, 8)addMarker()
}// 添加标注
const addMarker = () => {// 清空标注 使其始终为一个markerLayer.setGeometries([])markerLayer.add({position: new TMap.LatLng(formData.value.lat, formData.value.lng)})
}</script>

5.最终效果

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

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

相关文章

Socks5代理为什么比HTTP代理快?

在数字化日益深入的时代&#xff0c;网络安全和隐私保护成为了公众关注的焦点。为了应对网络威胁&#xff0c;保护个人隐私和数据安全&#xff0c;代理技术应运而生。在众多代理协议中&#xff0c;SOCKS5代理和HTTP代理是两种较为常见的选择。然而&#xff0c;为何SOCKS5代理在…

网页设计零基础入门:前端技术全攻略

在当今互联网飞速发展的时代&#xff0c;前端网页设计已经成为一个备受关注的领域。随着其重要性的不断提高&#xff0c;越来越多的专业人士和爱好者开始对前端设计感兴趣&#xff0c;希望通过掌握这项技术开辟自己的职业道路。然而&#xff0c;对于新手设计师来说&#xff0c;…

ollama + lobechat 搭建自己的多模型助手

背景 人工智能已经推出了快2年了&#xff0c;各种模型和插件&#xff0c;有渐渐变成熟的趋势&#xff0c;打造一个类似 hao123网站的人工智能模型入口&#xff0c;也变得有需求了。用户会去比较多个ai给出的答案&#xff0c;作为程序员想拥有一台自己的GPU服务器来为自己服务。…

如何在vue的项目中导入阿里巴巴图标库

阿里巴巴矢量图标库官网&#xff1a;iconfont-阿里巴巴矢量图标库 选择你喜欢的图标&#xff0c;添加入库 点击添加至项目&#xff0c;并新建文件夹&#xff0c;点击确定 选择font-class&#xff0c;点击生成代码 代码生成后&#xff0c;在网站上打开 全选复制到style 点击复制…

【TB作品】MSP430F6638单片机,频率计

基于 MSP430-FFTB6638 实验箱 频率测量与通信系统 利用 MCU 定时器模块相关功能设计实现数字频率计功能&#xff0c;测量范围&#xff1a;100~10000Hz&#xff0c; 测量误差≤1%&#xff0c;测量速度≤1 秒。测量结果本地显示&#xff08;段式 LCD、字符型 LCD、点阵 LCD &…

springboot系列九: 接收参数相关注解

文章目录 基本介绍接收参数相关注解应用实例PathVariableRequestHeaderRequestParamCookieValueRequestBodyRequestAttributeSessionAttribute 复杂参数基本介绍应用实例 自定义对象参数-自动封装基本介绍应用实例 基本介绍 1.SpringBoot 接收客户端提交数据 / 参数会使用到相…

【小白也能看的懂】想要玩转AI大模型,这4招你得知道

前言 对于大部分人来说&#xff0c;能够灵活使用AI工具&#xff0c;并对自己每个常用的AI工具优劣势很清楚&#xff0c;就已经足够了。不过&#xff0c;毕竟AI发展实在太快&#xff0c;多了解一些相关的知识点&#xff0c;以全局的视角去看AI&#xff0c;可以避免管中窥豹&…

编程语言现状:深入剖析与未来展望

编程语言现状&#xff1a;深入剖析与未来展望 在数字化时代的浪潮中&#xff0c;编程语言作为信息科技领域的基石&#xff0c;正经历着前所未有的变革与发展。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析编程语言的现状&#xff0c;并展望其未来的发…

【错题集-编程题】买卖股票的最好时机(四)(动态规划)

力扣对应题目链接&#xff1a;188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;买卖股票的最好时机(四)_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 1、状态表示 为了更加清晰的区分买入和卖出&#xff0c;我们换成有股…

【鸿蒙学习笔记】通过用户首选项实现数据持久化

官方文档&#xff1a;通过用户首选项实现数据持久化 目录标题 使用场景第1步&#xff1a;源码第2步&#xff1a;启动模拟器第3步&#xff1a;启动entry第6步&#xff1a;操作样例2 使用场景 Preferences会将该数据缓存在内存中&#xff0c;当用户读取的时候&#xff0c;能够快…

springboot对象参数赋值变化

java springboot 项目&#xff0c; 通过接口修改Person类 name值&#xff0c; 在别的类中&#xff0c;注入Person类 Resource Person person&#xff0c; 为什么拿不到 接口修改的 name的值&#xff0c;是Person类 不同的对象造成的 吗 参数对象和注入对象区别 Person类&…

云WAF | 云waf基础知识详解

随着数字时代的到来&#xff0c;网络安全问题越来越突出&#xff0c; Web应用防火墙&#xff08;WAF&#xff09;是保障 Web应用安全的一道重要防线。在云计算环境下&#xff0c;云环路由云平台&#xff08;WAF&#xff09;的出现&#xff0c;其融合了 WAF的能力和云计算的灵活…

【Linux】IP地址与主机名

文章目录 1.IP地址2.特殊IP地址3.主机名4.域名解析 1.IP地址 每一台联网的电脑都会有一个地址&#xff0c;用于和其它计算机进行通讯 IP地址主要有2个版本&#xff0c;V4版本和V6版本 IPv4版本的地址格式是&#xff1a;a.b.c.d,其中abcd表示0~255的数字&#xff0c;如192.168.…

PS 2024【最新】中文白嫖版!,安装教程,图文步骤

文章目录 软件介绍软件下载安装步骤 软件介绍 Photoshop&#xff0c;简称“PS” Adobe Photoshop&#xff0c;简称“PS”&#xff0c;是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具&#xff0c;可以有效地…

利用AI快速上手新项目:开发者的高效指南

使用AI帮助开发者熟悉新的项目 在现代软件开发中&#xff0c;开发者经常需要快速熟悉一个新的项目。项目可能包含复杂的结构和大量的文件&#xff0c;这对新手开发者来说无疑是一项挑战。幸运的是&#xff0c;借助AI技术&#xff0c;我们可以更加高效地了解项目结构&#xff0…

道路运输企业管理人员安全考核试题(附答案)

1、【多选题】《道路旅客运输企业安全管理规范》规定&#xff0c;客运企业应当制定车辆动态监控操作规程。操作规程的内容包括( )。(ABCD) A、卫星定位装置、视频监控装置、动态监控平台设备的检修和维护要求 B、动态监控信息采集、分析、处理规范和流程 C、违法违规信息统…

探索Facebook在人工智能领域的最新进展

在当今快速发展的科技领域中&#xff0c;人工智能&#xff08;AI&#xff09;作为一项关键技术&#xff0c;正在逐步改变着社交媒体的面貌。作为全球最大的社交平台之一&#xff0c;Facebook积极探索和应用人工智能&#xff0c;以提升用户体验、增强平台安全性并推动技术创新。…

Nodejs 第八十四章(ElasticSearch搜索)

ElasticSearch基本用法在之前的篇章介绍过了 这里不在过多阐述 模拟假数据 安装库 faker-js/faker 模拟假数据的一个库非常好用支持中文使用中文 locale: [zh_CN], 设置即可生成名字&#xff0c;邮箱&#xff0c;手机号&#xff0c;id&#xff0c;年龄&#xff0c;性别生成完成…

ATT 和 GATT:数据表示和交换

背景介绍 BLE的通信和以太网&#xff0c;wifi有个重大的不同是&#xff1a;BLE通信的设备往往有特定的功能。且这个功能不会在运行中发生变化。 因此蓝牙设备通信的时候&#xff0c;只能访问预先定义好的&#xff08;也就是配置文件profile&#xff09;的功能。 那profile里写…

批量制作word表格

问题背景 将excel表中的成绩内容制作为成绩单&#xff0c;每页对应一个学员的成绩&#xff0c;方便打印 代码实现 ## 导入包 import pandas as pd from docx import Document from docx.enum.text import WD_ALIGN_PARAGRAPH,WD_LINE_SPACING# 读取 Excel 内容 df pd.read_e…