UniApp 打包 iOS 使用 @googlemaps/js-api-loader 的方法和注意事项

### UniApp 打包 iOS 应用时使用 `@googlemaps/js-api-loader` 的方法 #### 安装依赖库 为了能够在项目中集成 Google Maps API，在项目的根目录下执行命令来安装所需的 npm 包： ```bash npm install @googlemaps/js-api-loader ``` 这一步骤确保了开发环境中有可用的加载器用于引入地图服务[^1]。 #### 配置 Vue 组件以初始化 Map 实例 在具体的页面组件内，通过 `<script setup>` 或者选项式语法定义好地图容器并调用加载函数。下面是一个简单的例子展示如何创建一个包含地图的地图视图组件： ```vue <template> <div id="mapContainer"></div> </template> <script lang="ts"> import { ref, onMounted } from 'vue'; import { Loader } from '@googlemaps/js-api-loader'; export default { name: "MapView", setup() { const mapElement = document.getElementById('mapContainer'); let loader = new Loader({ apiKey: process.env.VUE_APP_GOOGLE_MAPS_API_KEY, version: "weekly" }); onMounted(() => { loader.load().then((google) => { new google.maps.Map(mapElement as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); }).catch(console.error); }) return {}; } } </script> <style scoped> #mapContainer { height: 100vh; width: 100%; } </style> ``` 此代码片段展示了如何利用 TypeScript 和 Composition API 来设置地图实例，并且指定了地图中心位置和缩放级别。 #### 注意事项 - **API Key 设置**: 确认已经在环境中配置好了有效的谷歌地图 API 密钥作为 VUE_APP_GOOGLE_MAPS_API_KEY 变量的一部分。对于生产版本的应用程序来说，应该遵循安全最佳实践妥善管理密钥的安全性和权限范围。 - **CORS 政策处理**: 如果遇到跨域资源共享 (Cross-Origin Resource Sharing, CORS) 错误，则可能需要调整服务器端响应头或考虑其他解决方案如代理请求等措施解决该问题。 - **iOS 平台特定配置**: 当针对苹果设备构建应用程序时，请注意检查 Info.plist 文件中的 URL Schemes 是否已正确添加必要的条目支持 webview 加载外部资源；另外还需确认 App Transport Security Settings 已经适当放宽以便允许 HTTP 请求（如果确实有必要的话），但这通常不推荐因为会降低安全性.