如何使用谷歌地球api(googlemap)配置web端地图(vue3)

1、如何接入谷歌地球js

首先打开谷歌地球官方api的文档网站
链接: 谷歌地球官方文档
然后根据官方的引导去谷歌map的配置页面申请API
注意！必须要申请谷歌API才能使用高级功能，并且申请API要求提供绑定一张谷歌账号所在地的银行信用卡，需要自己准备好。

下面的代码示例为如何引入谷歌地图api及需要加载的格式(VUE3+VITE)

// npm下载googlemap的包
npm install @googlemaps/js-api-loader

// 在所需要的页面单独引入谷歌地球的依赖
import { Loader } from "@googlemaps/js-api-loader"

// 定义谷歌地球参数，并初始化。
var map
const loader = new Loader({
  apiKey: "你的谷歌地球秘钥",
  version: "beta",
});
const mapOptions = {
  "tilt": 0,
  "heading": 0,
  "zoom": 18,
  "center": { lat:'经纬度注意要为数字类型才能识别', lng: '经纬度注意要为数字类型才能识别' },
  "mapId": "谷歌地图自定义样式ID",
  mapTypeId: "satellite",
  'zoomControl': false,
  'mapTypeControl': false,
  'scaleControl': false,
  'streetViewControl': false,
  'rotateControl': false,
  'fullscreenControl': false
};

// 加载谷歌地图方法
initMap()
function initMap() {
      loader.load().then(() => {
      	//绑定DIV
        const mapDiv = document.getElementById("map");
        const apiLoader = new Loader(loader);
        apiLoader.load();
        map  =  new google.maps.Map(mapDiv, mapOptions);
        initWebGLOverlayView(map)
        //click事件获得定位
        map.addListener("click", (e) => {
          console.log(e.latLng.lat(),e.latLng.lng());
        });
        map.moveCamera({
          center: new google.maps.LatLng(经度,纬度),
          zoom: 16,//缩放等级
          heading: 0,
          tilt: 60
        });
      });
}

<template>
  <div class="greetings">
   <div style="height: 100vh" id="map"></div>  
  </div>
</template>

这样就完成了一个初始化的谷歌地球加载
谷歌地球官方提供的教程为js和react实际上还是有些坑在的，比如加载的方法和类型之类的，接下来写一下谷歌地球加载模型和画路线的方法，以及标点自定义图标等。