vue3接入 谷歌地图

在Vue3中接入谷歌地图，通常需要使用第三方库`vue2-google-maps`或者`@vue-google-maps/core`。以下是使用`@vue-google-maps/core`的基本步骤：

1. 安装依赖：

   npm install @vue-google-maps/core

2. 在main.js或类似配置文件中引入并注册组件：

   import { createApp } from 'vue';
   import App from './App.vue';
   import { GMap, GMapMarker } from '@vue-google-maps/core';

   createApp(App).use({
     components: {
       GMap,
       GMapMarker,
     },
   }).mount('#app');

3. 在Vue组件中使用Google Map组件：

   <template>
     <g-map :center="center" :zoom="zoom">
       <g-marker :position="markerPosition"></g-marker>
     </g-map>
   </template>

   <script>
   export default {
     data() {
       return {
         center: { lat: 37.7749, lng: -122.4194 }, // San Francisco默认位置
         zoom: 10,
         markerPosition: { lat: 37.7749, lng: -122.4194 },
       };
     }
   };
   </script>

4. 别忘了在你的项目中启用谷歌地图API：
- 在HTML中加入API key（替换实际key）：

   <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

或者，在你的JavaScript中动态加载API：

   function initMap() {
     const map = new window.google.maps.Map(document.getElementById("map"), {
       center: { lat: 37.7749, lng: -122.4194 },
       zoom: 10,
     });
   }