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

news2024/9/21 20:49:40

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