vue3谷歌地图打点

Vue 3是一种流行的JavaScript框架，用于构建用户界面。谷歌地图是一种强大的地图服务，可以在网页上显示地图，并提供各种地图相关的功能。在Vue 3中使用谷歌地图进行打点可以通过以下步骤实现：

1. 首先，你需要在你的Vue项目中引入谷歌地图的JavaScript API。你可以在谷歌地图开发者平台申请一个API密钥，并将其添加到你的项目中。

2. 在Vue组件中，你可以使用`<script>`标签引入谷歌地图的API脚本，并在`mounted`生命周期钩子函数中初始化地图。

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

<script>
export default {
  mounted() {
    // 初始化地图
    const map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
      zoom: 12 // 设置地图缩放级别
    });

    // 在地图上添加标记点
    const marker = new google.maps.Marker({
      position: { lat: 37.7749, lng: -122.4194 }, // 设置标记点的经纬度
      map: map, // 将标记点添加到地图上
      title: "Hello World!" // 设置标记点的标题
    });
  }
};
</script>

在上面的代码中，我们首先在`<template>`标签中定义了一个`<div>`元素，用于显示地图。然后，在`<script>`标签中，我们在`mounted`生命周期钩子函数中初始化了地图，并在地图上添加了一个标记点。

请注意，上述代码中的经纬度和标题只是示例，你可以根据实际需求进行修改。