分享uniapp移动端和h5项目如何使用谷歌地图

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

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

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

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

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

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

在 里

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

在 里

methods 里的初始化函数

初始化函数是异步函数。

这里把 Loader 和初始化函数放在 mounted 周期里是为了谷歌地图在加载时 Map 需要挂载的 dom 节点已经生成，让谷歌地图能顺利获取到 dom 节点并加载出来。 如果说你需要从后端接口获取这个 API key 的话，那么放 mounted 里从接口获取 API key 也可以。

但是，因为页面 mounted 周期只执行一次，如果你的页面在还未获取到接口返回的 key 并挂载成功之前就跳转到其他页面的话，会导致谷歌地图的 js 代码加载不全，无法在页面显示时成功显示地图。

把从接口获取谷歌 key 的函数放到全局 js 里面，然后在 App.vue 里的 onLaunch 周期里调用函数并获取 key ，把获取到的内容存 localStorage 内供全局获取。然后在需要调取谷歌地图的页面里，从 localStorage 里获取到 key，然后把 Loader 放在 onLoad 周期里，初始化在 onShow 周期里。

需要注意，所有对地图的操作都需要在初始化完成之后（也就是说需要注意函数的执行顺序！）

代码如下：

注意： 如果你的地图遇到 Only secure origins are allowed 问题，是因为谷歌地图需要 https 或者使用 localhost 才能访问到。本地测试用 localhost 地址，线上的话使用 https 服务就能正常显示了。

使用了地图 api 的 uniapp 需要打自定义基座之后才能用第三方 sdk

uniapp 使用谷歌地图想要在真机显示，如果不采用安卓 apk 套壳 webview 方法的话，还得是用它提供的 组件和获取位置等函数。（用直接获取 dom 节点挂载地图只能在 h5 和 webview 里面正常显示，很怪）

使用 uniapp 提供的 组件的话，搭配官方提供的获取位置/设置标记等 API 的使用基本可以实现谷歌地图的大部分功能。

谷歌地图用的就是 wgs84 的坐标，不用额外配东西。

基座闪退报错的 log 位置可以在 这里 看官方文档获取

使用 组件的具体实现代码参考 uniapp 官方文档内的写法即可。