uni-app 谷歌地图使用自定义气泡时 IOS直接闪退
uni-app 谷歌地图使用自定义气泡时 IOS直接闪退
| 项目信息 | 描述 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 12 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.98 |
| 手机系统 | 全部 |
| 页面类型 | nvue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：12
HBuilderX类型：正式
HBuilderX版本号：3.98
手机系统：全部
页面类型：nvue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
测试过的手机：
- 苹果14
- 红米 u 1
示例代码：
<template>
<view class="content">
<map name="" :markers="markers" style="flex: 1;width: 750rpx;" :longitude="130.3786716" :latitude="33.5578242"
scale="12">
<cover-view slot="callout">
<!-- <cover-view v-for="(item,index) in markers" :markerId="item.id" class="map-place-sort">
<text class="map-place-sort-text">{{item.id}}</text>
</cover-view> -->
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
markers: [{
"id": 0,
"latitude": "33.5578242",
"longitude": "130.3786716",
"iconPath": "/static/images/route/origin.png",
"width": 32,
"height": 32
},
{
"id": 1,
"latitude": "33.586746399999996",
"longitude": "130.3951692",
"iconPath": "/static/images/route/via.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 20,
"anchorX": 0,
"display": "ALWAYS"
}
},
{
"id": 2,
"latitude": "33.588864",
"longitude": "130.3973069",
"iconPath": "/static/images/route/via.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 20,
"anchorX": 0,
"display": "ALWAYS"
}
},
// ... (more marker data)
{
"id": 16,
"latitude": "33.5619144",
"longitude": "130.37892979999998",
"iconPath": "/static/images/route/via.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 20,
"anchorX": 0,
"display": "ALWAYS"
}
}
],
}
},
}
</script>
<style>
.content {
flex: 1;
}
.map-place-sort {
border-radius: 999rpx;
border: 4rpx solid #fff;
width: 52rpx;
height: 52rpx;
background-color: #333;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.map-place-sort-text {
font-size: 28rpx;
color: #fff;
font-weight: bold;
text-align: center;
}
.map-place-default {}
</style>
5 回复
在使用 uni-app 开发时，如果遇到在 iOS 平台上使用 Google 地图自定义气泡（InfoWindow）时出现闪退的情况，可能是由于以下几个原因导致的：
1. 内存问题
- 原因: 自定义气泡可能会导致内存占用过高，尤其是在 iOS 设备上，内存管理较为严格，内存不足时容易导致闪退。
- 解决方案: 优化自定义气泡的内容，减少不必要的 DOM 元素和复杂的样式。确保在气泡关闭时及时释放相关资源。
2. JavaScript 错误
- 原因: 自定义气泡的 JavaScript 代码可能存在错误，导致在 iOS 上运行时崩溃。
- 解决方案: 使用 Safari 的开发者工具或 Xcode 的调试工具来检查是否有 JavaScript 错误。确保代码在 iOS 上能够正常运行。
3. Google Maps API 版本问题
- 原因: 使用的 Google Maps JavaScript API 版本可能存在兼容性问题。
- 解决方案: 确保使用的是最新版本的 Google Maps API，并检查是否有已知的兼容性问题。
4. UIWebView 与 WKWebView 的差异
- 原因: uni-app 在 iOS 上默认使用 WKWebView，而某些版本的 Google Maps API 可能对 WKWebView 支持不完全。
- 解决方案: 尝试在
manifest.json中配置使用UIWebView而不是WKWebView，但需要注意UIWebView已被苹果弃用，可能会导致应用审核不通过。
{
"app-plus": {
"webview": {
"useWKWebView": false
}
}
}5. 自定义气泡的 DOM 结构
- 原因: 自定义气泡的 DOM 结构可能过于复杂，导致在 iOS 上渲染时出现问题。
- 解决方案: 简化自定义气泡的 DOM 结构，避免使用复杂的 CSS 和 JavaScript 操作。
6. 异步加载问题
- 原因: 自定义气泡的内容可能是异步加载的，可能导致在内容未完全加载时就尝试显示气泡，从而引发崩溃。
- 解决方案: 确保自定义气泡的内容在完全加载后再进行显示。
7. 跨域问题
- 原因: 如果自定义气泡中加载了跨域资源（如图片、脚本等），可能会导致 iOS 上出现安全错误。
- 解决方案: 确保所有资源都在同一域名下，或者使用 CORS 解决跨域问题。
8. 调试与日志
- 解决方案: 使用 Xcode 的调试工具来捕获崩溃日志，查看具体的崩溃原因。也可以在代码中加入
try-catch块来捕获可能的异常。
9. 更新 uni-app 和插件
- 解决方案: 确保你使用的是最新版本的 uni-app 和相关的 Google Maps 插件，以获得最新的 bug 修复和兼容性改进。
示例代码优化
以下是一个简单的自定义气泡示例，确保代码简洁且兼容性良好：
// 创建地图
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
// 创建信息窗口
const infowindow = new google.maps.InfoWindow({
content: '<div style="color: black;">Hello World!</div>'
});
// 创建标记
const marker = new google.maps.Marker({
position: { lat: -34.397, lng: 150.644 },
map: map,
title: 'Hello World!'
});
// 点击标记时显示信息窗口
marker.addListener('click', () => {
infowindow.open(map, marker);
});