uni-app app端引入谷歌地图

### 如何在uni-app的App端项目中引入和配置谷歌地图API #### 创建并获取Google Maps API密钥 为了能够在应用程序中使用谷歌地图服务，开发者需要先注册一个Google Cloud账号，并创建一个新的项目。接着，在该平台上启用Maps JavaScript API以及其他可能需要用到的服务（比如Geocoding API）。最后一步是从控制台生成一个API Key用于后续的地图加载。 #### 安装必要的插件或模块 对于uni-app来说，虽然官方并没有直接提供针对原生Android/iOS平台上的google maps的支持[^2]，但是可以通过第三方库或者自定义webview的方式来实现这一功能。一种常见的做法是利用`dcloud/uni-map-plugin-google`这类由社区维护的地图插件来进行集成： ```bash npm install dcloud/uni-map-plugin-google --save ``` #### 修改manifest文件以适应不同操作系统的要求 由于涉及到调用外部资源和服务，因此还需要调整项目的`manifest.json`配置文件中的权限设置部分，确保应用拥有访问网络以及定位设备位置的权利。另外需要注意的是，在iOS环境下还需额外声明NSLocationWhenInUseUsageDescription键值对来描述为何请求地理位置信息；而在安卓方面则要记得添加meta-data标签指定所使用的api key: ```json { "permissions": { ... "android.permission.ACCESS_FINE_LOCATION": {}, "android.permission.INTERNET": {} }, "ios": { "info.plist": { "NSLocationWhenInUseUsageDescription": "我们需要您的位置以便为您提供更精准的地图服务" } }, "android": { "application": { "metaData": [ {"name": "com.google.android.geo.API_KEY", "value": "$your_google_maps_api_key"} ] } } } ``` #### 编写页面逻辑展示地图控件 当完成了上述准备工作之后就可以着手编写具体的业务代码了。这里给出一段简单的示例用来说明如何在一个vue单文件组件内嵌入google map实例： ```html <template> <div id="map"></div> </template> <script> import { load } from 'dcloud/uni-map-plugin-google'; export default { mounted() { const initMap = async () => { try { await load(); new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } catch (error) { console.error(error); } }; initMap(); } }; </script> <style scoped> #map { height: 100vh; width: 100vw; } </style> ``` 此段代码首先导入了之前提到过的辅助函数load(),它负责按需加载所需的sdk; 接着是在生命周期钩子mounted里边执行异步操作完成地图对象初始化工作，并传入初始中心坐标参数与缩放级别等属性值给构造器方法new google.maps.Map(). 此外还设置了样式让容器占据整个视窗空间从而达到全屏显示的效果.