vue3使用腾讯地图webSDK 鼠标点击地图选点

1首先引入腾讯地图 在vue项目的index.html中引入

   <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=PQZBZ-GL5KL-CLNPK-EJXF4-MOYBJ-IMBA4"></script>

2.在使用页面进行地图初始化

  const key=ref('PQZBZ-GL5KL-CLNPK-EJXF4-MOYBJ-IMBA4')
  const mymap=ref(null)
  const latitude=ref(36.877263),
  const longitude=ref(117.870287)
  const selectLatitude=ref('')
  const selectLongitude=ref('')
  //初始化地图
      async function initMap (){
      mymap.value=null
      //这里的latitude  和 longitude我这里默认写死了一个，可以获取当前经纬度。
         var center = await new TMap.LatLng(latitude.value, longitude.value);
      
      var map= await new TMap.Map('mymap', {
        zoom: 17,
        center: center
      });
      mymap.value=map
    //初始化marker图层
    markderLayer.value = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        geometries: [{
            "position": center
        }]
    });
    

    //监听点击事件添加marker
    map.on("click", (evt) => {
        console.log(evt);
        //清除掉上次点击的marker
        markderLayer.value.setGeometries([]);
        //新增marker
        markderLayer.value.add({
            position: evt.latLng
        });
        selectLatitude.value=evt.latLng.lat
        selectLongitude.value=evt.latLng.lng

    });
    }

这样就可以选点了，但是，我这里遇到了2个问题， 1.初始化地图，我这里就只执行了一次， 点击详情进入的时候，地图不再进行初始化 2.有的时候初始化地图，我计时给了 map.value=null 但是，还是会出现2个地图的现象 有知道解决办法的盆友可以给点指导 还有其他的关于地图的一些讨论，打开可以看我的小程序