Vue3引入騰訊地圖包含標注簡易操作指南

更新時間：2024年09月18日 08:36:52 作者：RyzenVega

這篇文章主要介紹了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. 創(chuàng)建容器

<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.latLng
  formData.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>