显示和小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
}
}
2***@qq.com (作者)
是的已经解决了
2024-12-06 11:43