项目背景

使用 uniapp + vue2 开发的国外类地图 APP，原本是打算使用 uniapp 打安卓包的方式，最后由于种种原因变成在安卓壳子里使用 webview 的套壳 APP，所以最终效果其实是跟 h5 的一致。

两种路子都试了，中间踩了非常非常非常多的坑！但是不管怎样，最终能上线成功，所以汇总一下我的血泪经验。

注意：使用google map的时候需要科学的方式上网，大家自备哈

谷歌地图google map官方文档：文档地址

npm 包加载谷歌地图并初始化挂载

文档里提供了三种加载 Maps JavaScript API 的方法，我这里使用的是第二种：使用官方提供的 npm 包 @googlemaps/js-api-loader 来加载谷歌地图。

先 npm 导包，然后在需要的页面进行局部注册。（没采用全局注册是因为担心全局注册可能会导致在不需要使用谷歌地图的页面加载缓慢，不过本人并没有试过全局注册是否会导致这种问题。）

在 <template> 里

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

注意：需要在 css 里面设置 div 的高度

在 <script> 里

import {
   
    Loader
} from "@googlemaps/js-api-loader";

export default{
   
	data(){
   
	    return {
   
	        // 当前地图实例
	        map: null, 
	        // 渲染地图缩放等级，具体数字详见google map文档
	        zoom: 15, 
	        // 渲染地图中心坐标
	        center: {
    lat: null,