6***@qq.com
6***@qq.com
  • 发布:2023-06-08 15:00
  • 更新:2023-06-12 18:28
  • 阅读:313

【报Bug】ios android map组件 slot="callout" 自定义marker 双指缩放时,marker位置乱飞

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: 全部

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone XR 小米10

示例代码:
<template>  
    <view class="Index">  
        <view class="header-box" :style="{paddingTop:`${padTop}rpx`}">  
            <view class="">12</view>  
        </view>  
        <view class="map-box">  
            <map id="map" ref="map" class="map" :scale="16" :longitude="longitude" :latitude="latitude" :markers="markers"  
                :enable-zoom="true">  
                <cover-view slot="callout">  
                    <template>  
                        <cover-view :marker-id="1">  
                            <cover-image style="width: 80rpx;height: 80rpx;" :src="bgUrl"></cover-image>  
                            <cover-image style="width: 40rpx;height: 40rpx;margin-top: -40rpx;margin-left: 40rpx;"  
                                :src="ava"></cover-image>  
                        </cover-view>  
                    </template>  
                </cover-view>  
            </map>  
            <cover-view class="ba-guan-box"></cover-view>  
        </view>  
    </view>  
</template>  

<script>  
    import gcoord from 'gcoord';  
    import config from "@/utils/config.js"  
    export default {  
        data() {  
            var result = gcoord.transform(  
                [120.303728, 31.581129], // 经纬度坐标  
                gcoord.Baidu, // 当前坐标系  
                gcoord.GCJ02 // 目标坐标系  
            );  
            const sysInfo = uni.getSystemInfoSync();  
            return {  
                padTop: sysInfo.statusBarHeight * 2,  
                latitude: result[1],  
                longitude: result[0],  
                bgUrl: `${config.imgHost}acc_tab4.png`,  
                ava: `${config.imgHost}into_page.png`,  
                width: 0,  
                height: 0,  
                markers: [{  
                    id: 1,  
                    title: "测试1",  
                    latitude: result[1],  
                    longitude: result[0],  
                    iconPath: "../../static/1.png",  
                    width: 1,  
                    height: 1,  
                    joinCluster: true,  
                    anchor: {  
                        x: 0.5,  
                        y: 0.5  
                    },  
                    customCallout: {  
                        display: 'ALWAYS',  
                        anchorX: 0.5,  
                        anchorY: 0.5,  
                    }  
                }]  
            }  
        },  
        onLoad() {},  
        onReady() {  
            let map = uni.createMapContext("map", this);  
            uni.getLocation({  
                success(res) {  
                    var result = gcoord.transform(  
                        [res.longitude, res.latitude], // 经纬度坐标  
                        gcoord.WGS84, // 当前坐标系  
                        gcoord.GCJ02 // 目标坐标系  
                    );  
                    console.log(result);  
                    map.moveToLocation({  
                        longitude: result[0],  
                        latitude: result[1]  
                    })  
                }  
            })  
            // map.addMarkers({  
            //  markers: []  
            // })  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    /* #ifdef MP */  
    page {  
        height: 100%;  
    }  

    .Index {  
        height: 100%;  
    }  

    .map-box {  
        height: 0;  
        flex: 1;  
    }  

    /* #endif */  

    .Index {  
        flex: 1;  
    }  

    .header-box {  
        width: 750rpx;  
        height: 200rpx;  
        background-color: red;  
        box-sizing: content-box;  
    }  

    .map-box {  
        position: relative;  
        flex: 1;  
        background-color: yellow;  
    }  

    .ba-guan-box {  
        position: absolute;  
        width: 705rpx;  
        left: 22.5rpx;  
        bottom: 20rpx;  
        height: 200rpx;  
        background-color: #fff;  
        border-radius: 20rpx;  
    }  

    .map {  
        width: 750rpx;  
        flex: 1;  
    }  
</style>

操作步骤:

同上

预期结果:

双指缩放时自定义的markers的位置不要乱飞

实际结果:

双指缩放时自定义的markers的位置乱飞了

bug描述:

APP端选择的是高德的地图

2023-06-08 15:00 负责人:DCloud_iOS_XHY 分享
已邀请:
DCloud_iOS_XHY

DCloud_iOS_XHY

marker 的锚点需要设置为图片的中心点,要结合图片上传左右的留白,设置准确后就好了,锚点属性存在的意义就是来适配不同的图片样式的

  • 6***@qq.com (作者)

    上面的代码,图片的宽高是写死的,那锚点如何设置呢?

    2023-06-14 17:20

  • DCloud_iOS_XHY

    回复 6***@qq.com: 上传一个完整的示例工程,我看一下

    2023-06-15 20:54

该问题目前已经被锁定, 无法添加新回复