uni-app map缩放时 markers不会变化

uni-app map缩放时 markers不会变化

项目属性 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows7
HBuilderX类型 正式
HBuilderX版本号 3.3.2
手机系统 iOS
手机系统版本号 iOS 14
手机厂商 苹果
手机机型 iphoneX
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<template>  
    <div>  
        <map latitude="39.90792" longitude="116.397517" :markers="markers" :style="{height:height+'px',width:width+'px'}"></map>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                height:'',  
                width:'',  
                markers:[{  
                    id:'1',  
                    latitude:'39.90792',  
                    longitude:'116.397517',  
                }]  
            }  
        },  
        onLoad() {  
            // 获取手机的物理系高度  
            uni.getSystemInfo({  
                success:res=>{  
                    this.height=res.windowHeight  
                    this.width=res.windowWidth  
                }  
            })  
        },  
    }  
</script>

预期结果：

在ios上缩放时会有偏移，markers随着缩放变化

实际结果：

在ios上缩放时会有偏移，markers不会随着缩放变化

bug描述：

map缩放时，markers不会变化（实际查看上感觉像是markers偏移了），附件内有视频

map组件bug.zip


更多关于uni-app map缩放时 markers不会变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

未设置标注图时使用的是高德SDK 内置的 marker 标注图，这个图片下面带了透明区域，图片高度实际上是肉眼看到的大头针的两倍，需要设置 marker 的 anchor
anchor: {
x: 0.5,
y: 0.5
},

更多关于uni-app map缩放时 markers不会变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的map组件中，iOS平台上确实存在缩放时markers位置偏移的问题。这是由于iOS原生地图组件在缩放时markers的定位计算方式与Android不同导致的。

解决方案建议：

  1. 可以尝试在marker对象中添加fixed属性设置为true：
markers:[{  
    id:'1',  
    latitude:'39.90792',  
    longitude:'116.397517',
    fixed: true
}]
  1. 或者监听map的regionchange事件，在缩放时重新计算markers位置：
<map @regionchange="handleRegionChange" ...></map>

methods: {
    handleRegionChange(e) {
        if(e.type === 'end') {
            // 重新设置markers
        }
    }
}
  1. 也可以考虑使用include-points属性来保持地图区域和markers的同步：
<map :include-points="markers" ...></map>
回到顶部