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

禇柒

已于 2024-01-13 13:46:02 修改

阅读量2.6k

点赞数 33

分类专栏： uniapp 文章标签： uni-app vue

于 2024-01-13 13:44:04 首次发布

本文链接：https://blog.csdn.net/qq_51185865/article/details/135559460

版权

本文档详细介绍了在uniapp移动端和H5项目中如何使用谷歌地图，包括npm包加载、初始化地图、解决API key获取及地图显示问题，以及在真机上的注意事项。遇到的挑战包括地图加载时机、安全访问、坐标格式和第三方SDK集成。

摘要由CSDN通过智能技术生成

项目背景

使用 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,