当前位置: 首页 > news >正文

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.lryc.cn/news/398478.html

相关文章:

  • 迅狐抖音机构号授权矩阵系统源码
  • 数据库系统原理练习 | 作业2-第2章关系数据库(附答案)
  • 有向图的强连通分量——AcWing 367. 学校网络
  • 安全开发--多语言基础知识
  • 如何使一个盒子水平垂直居中(常用的)
  • 安全防御-用户认证综合实验
  • uniapp安卓离线打包配置scheme url
  • C++ STL std::lexicographical_compare用法和实现
  • ORM Bee,如何使用Oracle的TO_DATE函数?
  • HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
  • C++:创建线程
  • python如何查看类的函数
  • P6. 对局列表和排行榜功能
  • uniapp easycom组件冲突
  • 总结24个Python接单赚钱平台与详细教程,兼职月入5000+
  • macOS 的电源适配器设置
  • 视觉SLAM与定位之一前端特征点及匹配
  • 开源项目的认识理解
  • 37.哀家要长脑子了!--层序遍历
  • 【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展
  • HTML5表单的自动验证、取消验证、自定义错误信息
  • SpringMVC系列九: 数据格式化与验证及国际化
  • 判断链表中是否有环(力扣141.环形链表)
  • Kubernetes基于helm部署jenkins
  • 【Linux】vim详解
  • Android11 mtk 第二次设置壁纸,锁屏壁纸不变的问题
  • Java学习路线
  • java 实现人脸检测
  • VSCode神仙插件——Codeium (AI编程助手)
  • css文本划线效果(text-decoration相关属性详解)