简单记录vue2使用谷歌地图

最近在做项目时，使用到谷歌地图，为了后续可能牵涉到使用，这里做一个简单的记录，具体的步骤操作如下：

前提准备

谷歌地图开发开发文档：developers.google.com/maps/docume…

注册谷歌账号，并创建项目

1. 注册谷歌账号
2. 创建项目
3. 项目创建成功后，在自己对应的项目下，选择API和服务->库->Maps JavaScript API

4. 启动api，在凭证里查看api key 或者密钥等信息

构建简单的谷歌地图

1. 安装插件

@googlemaps/js-api-loader @googlemaps/markerclusterer （聚合类标记）

<template>
    <div id="map" class="map"></div>
</template>
<script>
import { Loader } from "@googlemaps/js-api-loader";
import { MarkerClusterer } from "@googlemaps/markerclusterer";
export default {
  data(){
    return{}
  },
  async mounted() {
    const loader = new Loader({
      apiKey: "Your api key", //设置地图key
      version: "quarterly",
    });
    loader.load().then(async () => {
      const { Map } = await google.maps.importLibrary("maps");
      new google.maps.Map(document.getElementById("map"), {
        zoom: 3,
        center: { lat: -28.024, lng: 140.887 },
        mapId: "DEMO_MAP_ID",
        disableDefaultUI: true, //禁止所有控件
      });
    })
  }
}
    
</script>

以上就是谷歌地图的简单使用，具体的操作还需要阅读文档来实现比较高级的操作