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.最终效果