Vue3 + 腾讯地图：使用 LatLng(39.98210863924864, 116.31310899739151) 为中心创建普通 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>