vue使用腾讯地图(拾取坐标）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

下面案例可供参考

一、使用步骤

1.申请key

登录 ：https://lbs.qq.com/dev/console/register

2.引入库

在vue的index.html的head里面加上这个

添加 div 标签作为地图容器，同时为 div 指定 id 属性
代码如下（示例）：

<template>
  <div class="app-container" >
    <div id="container" class="map-container"></div>
</div>
  </template>
  <!-- 腾讯地图 -->
  <script setup >
  import { onMounted, onBeforeUnmount } from 'vue';
  //向父页面传递参数
  var emit = defineEmits();

  onMounted(() => {
    nextTick(() => {
      initMap()
    });
  });
  function initMap() {
        //设置中心点坐标
        var center = new TMap. LatLng(26.294274,107.442953); 
        //初始化地图
        var map = new TMap.Map('container', {
          center: center,
          zoom: 17.2,   //设置地图缩放级别
        });
       // 从地图容器移出默认控件,
        // map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 从地图容器移出 缩放控件,
        // map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); // 从地图容器移出 比例尺控件,
        // map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 从地图容器移出 旋转控件,

        //创建并初始化MultiMarker:表示地图上的多个标注点,
       var markerLayer = new TMap.MultiMarker({
          id: 'marker-layer',
          map: map, //指定地图容器
          geometries: []//点数组
        });
        //监听点击事件添加marker
        map.on("click", (evt) => {
          var lat;
          var lng;
          var lat_lng;
          //添加一个marker
          if (markerLayer.geometries.length == 0 || markerLayer==null) {
            markerLayer.add({
              position: evt.latLng
            });
            //把你在图层上标记的点的经纬度存起来，需要的话把它显示在页面上
            lat = evt.latLng.getLat().toFixed(6);
            lng= evt.latLng.getLng().toFixed(6);
            //向页面传递参数
            lat_lng = lat + "," + lng;
            emit('lat_lng', lat_lng);
          }else{
            var id = markerLayer.geometries[0].id;
            // 移除为该id的点标记
            markerLayer.remove(id); 
          }
        });
     
    }
     //父调子方法
  function clearMarker(){
    if(markerLayer!=undefined && markerLayer.geometries.length>0){
      var id = markerLayer.geometries[0].id;
      // 移除为该id的点标记
      markerLayer.remove(id);
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .map-container {
    width: 100%;
    height: 50vh;
    border-radius: 16px;
    :deep(.info-card) {
      position: relative;
      padding: 15px 25px;
      background-color: #fff;
      border-radius: 30px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 22px;
      color: #19193e;
      &::after {
        content: '';
        border-width: 15px;
        position: absolute;
        left: 50%;
        bottom: -50%;
        transform: translateX(-50%);
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent transparent;
      }
    }
  }
  </style>
  

父页面引用组件
1、A页面想要引用B页面，则在A页面把B页面变成组件（components）使用；
2、A向B传参数，A页面在使用组件的时候传递参数（:xx=‘yy’），B页面用props接收参数对象；
3、B向A返回结果，用$emit返回结果。A页面在使用组件的时候@xxx接收结果

import TencentMap from '@/components/TencentMap';
<!-- 地图组件 -->
<el-dialog append-to-body  
:fullscreen="false" 
:show-close="true" 
v-model="modelMsg" 
width="45%" 
height="25%">
  <TencentMap v-if="showMap" ref="tencentMap" @lat_lng='lat_lng'></TencentMap>
 </el-dialog>
  //@xxx接收页面传过来的结果
    function lat_lng(data){
    console.log(data);
    }
       //父组件调用子组件的方法
        tencentMap.value.clearMarker()

总结

本文记录自己在开发过程中使用vue3+腾讯地图。