uni-app map组件 ios端无法通过markers 生成标点

uni-app map组件 ios端无法通过markers 生成标点

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.2

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：8p,6p,inphoneX，推测ios全机型

页面类型：vue

打包方式：云端

示例代码：

<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
</view>
</template> 
<script>
export default {
data() {
return {
title: 'Hello',
latitude: 30.269966,
longitude: 120.195461,
covers: [{
latitude: 30.269966,
longitude: 120.195461
}]
}
},
onLoad() {

},
methods: {

}
}
</script> 
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {  
height: 200rpx;  
width: 200rpx;  
margin-top: 200rpx;  
margin-left: auto;  
margin-right: auto;  
margin-bottom: 50rpx;  
}

.text-area {  
display: flex;  
justify-content: center;  
}

.title {  
font-size: 36rpx;  
color: #8f8f94;  
}
</style>

操作步骤：

官方默认demo，使用的是文档上的 map组件部分的示例代码 ，仅修改了markers内的坐标

预期结果：

ios端地图组件markers 标点可正常展示

实际结果：

ios端地图组件markers 标点无法正常展示

bug描述：

map组件 ios端无法通过markers 生成标点 ， iOS端查看小程序版可以正常展示
安卓、H5、小程序均可以正常通过markers 生成标点
附件为测试demo map.rar


更多关于uni-app map组件 ios端无法通过markers 生成标点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已确认，默认的标注图失效了，下个版本会修复 解决方法：

uniapp 中的 map 推荐使用nvue 来做，uni官方的文档也是针对 nvue 的，改成nvue实现；
给 mark 设置一下图片 setIcon 参考 https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Marker.setIcons

更多关于uni-app map组件 ios端无法通过markers 生成标点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


下个版本有预计更新时间吗

这个问题是iOS原生地图组件在特定版本下的已知兼容性问题。根据你的描述，iOS端无法显示markers标点，而其他平台正常，这通常与iOS地图SDK的渲染机制有关。

主要原因：

  1. iOS地图组件默认不显示标注：在iOS原生地图中，markers需要设置明确的图标才会显示，而Android和H5端有默认图标
  2. 坐标格式问题：iOS对坐标精度要求更高，需要确保经纬度是有效的浮点数
  3. 异步渲染时机：iOS地图组件可能在数据绑定完成前就完成了初始化

解决方案：

  1. 为markers添加iconPath属性（关键修复）：
covers: [{
  latitude: 30.269966,
  longitude: 120.195461,
  iconPath: '/static/marker.png'  // 必须提供图标路径
}]
  1. 确保markers数据在onReady后设置：
onReady() {
  setTimeout(() => {
    this.covers = [{
      latitude: 30.269966,
      longitude: 120.195461,
      iconPath: '/static/marker.png'
    }]
  }, 100)
}
  1. 检查manifest.json配置： 确保已申请iOS地图权限：
{
  "app-plus": {
    "distribute": {
      "ios": {
        "permissions": {
          "Maps": {}
        }
      }
    }
  }
}
  1. 使用v-if控制渲染时机：
<map v-if="mapReady" ...></map>

data() {
  return {
    mapReady: false
  }
},
onLoad() {
  this.mapReady = true
}
回到顶部