<view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers" :rotate="rotate" >
</map>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
rotate: 62, //倾斜角度
id:0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.909,
longitude: 116.39742,
iconPath: '../../../static/location.png'
}, {
latitude: 39.90,
longitude: 116.39,
iconPath: '../../../static/location.png'
}]
}
},
methods: {
}
}
</script>
<style>
</style> 
8***@qq.com
- 发布：2024-10-16 17:43
- 更新：2024-10-16 19:25
- 阅读：54
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 19045.5011
HBuilderX类型： 正式
HBuilderX版本号： 4.29
第三方开发者工具版本号： 1.06.2409131 win32-x64
基础库版本号： 3.6.2
项目创建方式： HBuilderX
示例代码：
操作步骤：
安卓手机扫码 出现蓝屏 显示here字样
安卓手机扫码 出现蓝屏 显示here字样
预期结果：
希望正常显示
希望正常显示
实际结果：
显示蓝屏
显示蓝屏
bug描述：
使用map组件 加了一个rotate 属性 苹果手机扫码没问题 安卓手机扫码 出现蓝屏 显示here字样
看起来这是微信上面的地图问题，在微信社区中也有类似的问题：微信社区内容
经过测试，可以通过以下方式解决，给父标签加一个 v-if 之后会生效。
<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap" v-if="show">
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
:rotate="rotate">
</map>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
rotate: 62, //倾斜角度
id: 0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.909,
longitude: 116.39742,
iconPath: '/static/logo.png'
}, {
latitude: 39.90,
longitude: 116.39,
iconPath: '/static/logo.png'
}],
show:true
}
},
methods: {
}
}
</script>
<style>
</style>
8***@qq.com (作者)
已测试好用，这种奇葩bug~感谢感谢
2024-10-16 20:00