uni-app map组件加rotate属性模拟器可显示安卓真机扫码后显示蓝屏带here字样

项目属性	值
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	19045.5011
HBuilderX类型	正式
HBuilderX版本号	4.29
第三方开发者工具版本号	1.06.2409131 win32-x64
基础库版本号	3.6.2
项目创建方式	HBuilderX

示例代码：

<template>  
    <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>

操作步骤：

安卓手机扫码出现蓝屏显示here字样

预期结果：

希望正常显示

实际结果：

显示蓝屏

bug描述：

使用map组件加了一个rotate 属性苹果手机扫码没问题安卓手机扫码出现蓝屏显示here字样

更多关于uni-app map组件加rotate属性模拟器可显示安卓真机扫码后显示蓝屏带here字样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

看起来这是微信上面的地图问题，在微信社区中也有类似的问题：微信社区内容
经过测试，可以通过以下方式解决，给父标签加一个 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>

更多关于uni-app map组件加rotate属性模拟器可显示安卓真机扫码后显示蓝屏带here字样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

已测试好用，这种奇葩bug~感谢感谢

sinazl 3楼

在uni-app中，map 组件是一个常用的组件，用于展示地图。关于你提到的 rotate 属性在模拟器中可以显示，但在安卓真机上显示蓝屏带 “here” 字样的问题，这通常与地图服务的配置、权限或地图服务的SDK集成有关。

首先，确保你已经正确配置了地图服务（如高德地图、腾讯地图等）的SDK和API Key。由于 rotate 属性并不是所有地图服务都支持的标准属性，因此，如果地图服务本身不支持该属性，就可能导致在真机上出现异常。

以下是一个基本的uni-app map 组件使用示例，这里以高德地图为例：

<template>
  <view>
    <map
      id="map"
      longitude="116.397428"
      latitude="39.90923"
      scale="15"
      :markers="[{id: 1, latitude: 39.90923, longitude: 116.397428}]"
      @tap="onMapTap"
      style="width: 100%; height: 300px;"
      :rotate="45" <!-- 注意：rotate属性可能不被所有地图服务支持 -->
      amap-wx="your_amap_wx_key" <!-- 高德地图的key -->
    ></map>
  </view>
</template>

<script>
export default {
  methods: {
    onMapTap(e) {
      console.log('Map tapped:', e);
    }
  }
}
</script>

<style>
/* 你的样式 */
</style>

在上面的代码中，rotate 属性被设置为45度。但是，请注意，如果高德地图的SDK不支持 rotate 属性，这可能会导致在真机上出现你描述的问题。

为了解决这个问题，你可以尝试以下步骤：

检查地图服务的文档：确认是否支持 rotate 属性。如果不支持，请移除该属性。
检查API Key：确保你使用的API Key是有效的，并且已经正确配置在项目中。
检查权限：确保你的安卓应用已经申请了必要的权限，如网络权限和定位权限。
更新SDK：如果你使用的是较旧的地图SDK版本，尝试更新到最新版本。
调试和日志：在真机上使用开发者工具进行调试，查看控制台是否有相关错误日志。