使用vue3 + 腾讯地图以LatLng3998210863924864 11631310899739151为中心 实现一个普通 Marker

在使用Vue3和腾讯地图实现普通Marker之前，需要先在项目中引入腾讯地图的JavaScript API。可以在HTML文件中引入以下代码：

<script src="//map.qq.com/api/js?v=2.exp&key=YOUR_APP_KEY"></script>

其中，YOUR_APP_KEY需要替换为腾讯地图开发者平台申请的应用密钥。

接下来，在Vue组件中可以通过以下方式初始化地图：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    const center = new qq.maps.LatLng(39.98210863924864, 116.31310899739151);
    const map = new qq.maps.Map(document.getElementById("map-container"), {
      center,
      zoom: 15,
    });
  }
};
</script>

这里使用了mounted钩子函数来在组件挂载后初始化地图。首先创建了一个LatLng对象作为地图中心点，并使用该对象以及zoom属性来创建了一个Map对象。该Map对象将被渲染到id为map-container的DOM元素上。

接下来，可以在mounted函数中创建Marker对象，并将其添加到地图上：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    const center = new qq.maps.LatLng(39.98210863924864, 116.31310899739151);
    const map = new qq.maps.Map(document.getElementById("map-container"), {
      center,
      zoom: 15,
    });
    
    // 添加Marker
    const marker = new qq.maps.Marker({
      position: center,
      map,
    });
  }
};
</script>

这里使用了qq.maps.Marker类来创建Marker对象，并将该对象的position属性设置为地图中心点。然后将该Marker对象添加到地图上，通过将该对象的map属性设置为先前创建的Map对象来实现。

最终的代码如下：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    const center = new qq.maps.LatLng(39.98210863924864, 116.31310899739151);
    const map = new qq.maps.Map(document.getElementById("map-container"), {
      center,
      zoom: 15,
    });
    
    // 添加Marker
    const marker = new qq.maps.Marker({
      position: center,
      map,
    });
  }
};
</script>