uni-app App-iOS平台 nvue map 组件中 marker 数据有callout参数不显示

uni-app App-iOS平台 nvue map 组件中 marker 数据有callout参数不显示

产品分类

uniapp/App

PC开发环境

项目 信息
操作系统 Windows
操作系统版本 win10教育版 1909
IDE HBuilderX
IDE版本 3.1.18

手机系统

项目 信息
系统 iOS
系统版本 iOS 12.4
厂商 苹果
机型 ipone6

页面类型

nvue

打包方式

云端

项目创建方式

HBuilderX

App下载地址或H5网址

http://www.qiyuekeji.com/down/download.html

示例代码

<map :style="{'width': mapWidth,'height': mapHeight,'vertical-align': 'middle', }" id="map" enable-rotate="true"  
latitude="latitude" :scale="scale" :longitude="longitude" :markers="markers" @markertap="markerclick"
        @regionchange="regionchangeEnd" @calltaputtap="calltap" :enable-traffic="false">
</map>
<script>
              this.markers = [{
                "callout": {
                    "content": "四川省\n49",
                    "color": "#ffffff",
                    "fontSize": 23,
                    "bgColor": "#0897F4",
                    "display": "ALWAYS",
                    "borderWidth": 3,
                    "borderColor": "#ffffff",
                    "padding": 20,
                    "borderRadius": 10,
                    "textAlign": "center"
                },
                "latitude": "30.659462",
                "longitude": "104.065735",
                "iconPath": "../../../static/img/mar.png",
                "width": 1,
                "height": 10
            }]
</script>

操作步骤

this.markers = [{
"callout": {
"content": "四川省\n49",
"color": "#ffffff",
"fontSize": 23,
"bgColor": "#0897F4",
"display": "ALWAYS",
"borderWidth": 3,
"borderColor": "#ffffff",
"padding": 20,
"borderRadius": 10,
"textAlign": "center"
},
"latitude": "30.659462",
"longitude": "104.065735",
"iconPath": "../../../static/img/mar.png",
"width": 1,
"height": 10
}]

预期结果

ios显示，Android显示

实际结果

ios不显示，Android显示

bug描述

markers = [{
"callout": {
"content": "四川省\n49",
"color": "#ffffff",
"fontSize": 23,
"bgColor": "#0897F4",
"display": "ALWAYS",
"borderWidth": 3,
"borderColor": "#ffffff",
"padding": 20,
"borderRadius": 10,
"textAlign": "center"
},
"latitude": "30.659462",
"longitude": "104.065735",
"iconPath": "../../../static/img/mar.png",
"width": 1,
"height": 10
}]  不显示

更多关于uni-app App-iOS平台 nvue map 组件中 marker 数据有callout参数不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

运行示例代码hello uni-app能复现你描述的问题吗？

更多关于uni-app App-iOS平台 nvue map 组件中 marker 数据有callout参数不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iOS平台的nvue map组件中，callout不显示通常与以下因素有关：

  1. iOS版本兼容性问题：iOS 12.4对callout的支持可能存在限制。建议升级到iOS 13+测试，已知iOS 13+对callout的支持更完善。

  2. marker尺寸问题：代码中设置的width: 1, height: 10尺寸过小，可能导致callout无法正常触发。建议调整为合理尺寸（如30x30以上）。

  3. callout内容格式：iOS对换行符\n的支持不如Android稳定，可尝试将content改为单行文本测试。

  4. 样式属性兼容性：

    • borderWidth在iOS可能不支持，建议移除测试
    • padding值过大可能影响显示
    • 建议先使用最小配置测试：
    callout: {
  content: "测试",
  display: "ALWAYS"
}
回到顶部