2***@qq.com
2***@qq.com
  • 发布:2024-12-05 16:44
  • 更新:2024-12-21 11:56
  • 阅读:51

uniapp编译成app使用,然后在使用map的时候怎么获取缩放比例,使用的是高德的

分类:uni-app

显示和小marks都显示没有问题,就是拿不到缩放的比例的问题,倒是缩放有触发但是也仅限于触发没有返回我想要的数据

<template>  
    <view style="" class="mapBox">  
        <map id="mapBoday" style="width: 100%; height: 100%; z-index: 1;position: absolute;" :scale="scale"  
            :show-compass="showCompass" :latitude="latitude" :longitude="longitude" @markertap="onMarkerTap"  
            :markers="markers" @click="getclick" @updated="onMapFinish" min-scale="1" max-scale="20"  
            @regionchange="onRegionChange">  
        </map>  

    </view>  
</template>  

<script setup>  
    import {  
        ref,  
        onMounted  
    } from 'vue'  

    // 定义经纬度状态  
    const latitude = ref(28.009883);  
    const longitude = ref(111.126059);  
    const markers = ref([]); //地图的地址  
    const showCompass = ref(true)  

    const mapPlan = ref(true)  

    const address = ref('')  
    const scale = ref(10)  

    const getclick = (e) => {  
        console.log(e)  
    }  
    const onMapFinish = (e) => {  
        console.log("更新事件", e)  
    }  

    const onRegionChange = (event) => {  
        // 监听地图缩放,获取当前缩放级别  
        console.log("监听到缩放", event, event.detail)  
        let mapContext = uni.createMapContext("mapBoday");  
        mapContext.getScale({  
            success(res) {  
                console.log('当前缩放级别:', res.scale);  
                scale.value = res.scale;  
            },  
            fail(err) {  
                console.error("获取缩放级别失败:", err);  
            }  
        });  

        if (event.type === 'end') {  
            console.log('当前缩放级别:', event.detail.scale);  
            // scale.value = event.detail.scale;  
        }  
    };  

    // 获取当前位置信息  
    const getLocation = () => {  
        uni.getLocation({  
            type: 'gcj02', // 使用 gcj02 坐标系  

            success: (res) => {  
                // latitude.value = res.latitude;  
                // longitude.value = res.longitude;  

                address.value = res.address;  

                // 设置标记(marker)  
                markers.value = [{  
                        id: 1,  
                        latitude: res.latitude,  
                        longitude: res.longitude,  
                        iconPath: '../../static/icon/location.png', // 可自定义图标路径  
                        width: 10,  
                        height: 10  
                    },  
                    {  
                        id: 2,  
                        latitude: 28.009883, // 标记的经度  
                        longitude: 111.126059, // 标记的纬度  
                        iconPath: '../../static/icon/destination.png', // 自定义图标  
                        width: 10,  
                        height: 10,  
                        callout: {  
                            content: '点击导航到这里',  
                            color: '#000',  
                            fontSize: 12,  
                            borderRadius: 5,  
                            bgColor: '#fff',  
                            padding: 5,  
                            display: 'ALWAYS'  
                        }  
                    }  
                ];  
            },  
            fail: (err) => {  
                console.log('获取定位失败:', err);  
            }  
        });  
    };  

    // 点击标记时的处理函数  
    const onMarkerTap = (event) => {  
        const markerId = event.id;  
        const selectedMarker = markers.value.find(marker => marker.id === markerId);  

        console.log(event, markerId, selectedMarker)  
        if (selectedMarker) {  
            // 打开高德地图进行导航  
            uni.openLocation({  
                latitude: selectedMarker.latitude,  
                longitude: selectedMarker.longitude,  
                name: '导航目的地', // 可选,显示在高德地图上的目的地名称  
                address: '这里是目的地地址', // 可选,显示在高德地图上的详细地址  
                success() {  
                    console.log('导航成功');  
                },  
                fail(err) {  
                    console.error('导航失败:', err);  
                }  
            });  
        }  
    };  

    //切换视图  
    const openMapPlan = () => {  

    }  

    // 组件挂载时获取地理位置  
    onMounted(() => {  
        getLocation();  
        let mapContext = uni.createMapContext("mapBoday", this);  
        mapContext.getScale({  
            success(res) {  
                console.log("初始化缩放级别:", res.scale);  
                scale.value = res.scale;  
            }  
        });  
    });  
</script>  

<style lang="scss" scoped>  
    .mapBox {  
        height: 100%;  
        width: 100%;  
    }  
</style>

返回值是:

{  
    "defaultPrevented": false,  
    "timeStamp": 0,  
    "_stop": false,  
    "_end": false,  
    "type": "onRegionchange",  
    "bubbles": false,  
    "cancelable": false,  
    "target": {  
        "dataset": {  
            "v05504d77": "",  
            "v-05504d77": ""  
        },  
        "id": "mapBoday",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    },  
    "detail": {},  
    "currentTarget": {  
        "dataset": {  
            "v05504d77": "",  
            "v-05504d77": ""  
        },  
        "id": "mapBoday",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    }  
}
2024-12-05 16:44 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

简化一下问题,是问 regionchange 的回调结果里没有那个字段吗?

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

    是的已经解决了

    2024-12-06 11:43

2***@qq.com

2***@qq.com (作者)

可以看看我的博客我解决方案是这样的:
直达地址

  • DCloud_UNI_OttoJi

    是 let mapContext = uni.createMapContext("mapBoday", this); 这里有错误?

    2024-12-06 12:04

7***@qq.com

7***@qq.com

麻烦问一下是如何解决的

要回复问题请先登录注册