@@ -57,6 +57,7 @@ let details = reactive({
// datalist:[]
});
const Checkthebox=ref([]);
+const CheckthMax=ref([]);
onMounted(() => {
initmap();
});
@@ -65,8 +66,10 @@ watchEffect(() => {
details.item = router.currentRoute.value.query.id;
if (!details.item) return;
getReservationAddr(details.item).then(res => {
+
console.log(res.data.data,'参数接受的');
- Checkthebox.value = res.data.data;//统计当前勾选
+ CheckthMax.value = res.data.data;//统计当前勾选
+
const data = res.data.data;
details.reservationData = res.data.data;
details.mapLoc.remove(details.markersarr);
@@ -78,7 +81,7 @@ watchEffect(() => {
details.drivingarrs = [];
// details.datalists = [];
init(res.data.data);
- Dtloading.value=false
+
});
});
function initmap() {
@@ -87,10 +90,12 @@ function initmap() {
viewMode: '2D', // 默认使用 2D 模式
zoom: 9, //初始化地图层级
center: [104.293242, 30.582939], //初始化地图中心点
+ zooms:[3,16], //设置缩放级别范围 3-20 级
});
});
}
function checkgoto() {
+
let ids = [];
details.datalists.map(item => {
console.log('item>>>>>>>>>>>>>>', item);
@@ -112,57 +117,129 @@ function checkgoto() {
});
useStores.commit('DEL_TAG_CURRENT');
}
+// async function init(data) {
+// if (details.mapLoc) {
+
+// await details.mapLoc.clearMap(); //重置地图标记
+
+// // maplabel()
+// let geocodess = [];
+// var geocoder = new AMap.Geocoder({});
+// data.map(async (item, index) => {
+// if (!item.jingdu || !item.weidu) {
+// return ElMessage.warning('地址有问题');
+// }
+// var marker = new AMap.Marker({
+// map: details.mapLoc,
+// position: [item.jingdu, item.weidu],
+// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+// anchor: 'bottom-center',
+// offset: new AMap.Pixel(0, 0),
+// });
+// await marker.setMap(details.mapLoc);
+// await marker.setLabel({
+// offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
+// content: `
${item.warehouseName}
`, //设置文本标注内容
+// direction: 'top', //设置文本标注方位
+// });
+// // details.markersarr=[]//修改过
+// details.markersarr.push(marker);
+// await geocoder.getLocation(item.deliveryAddress, (status, result) => {
+// console.log(status,'status');
+// console.log(result,'result');
+// if (status == 'complete' && result.info == 'OK') {
+// // result中对应详细地理坐标信息
+// details.mapLoc.setCenter([
+// result.geocodes[0].location.lng,
+// result.geocodes[0].location.lat,
+// ]);
+// geocodess.push({
+// pontion: result.geocodes[0].location,
+// content: item.consignee + '--' + item.deliveryAddress + '' + '--' + item.deliveryPhone,
+// items: item,
+// });
+// // if (index + 1 == data.length) {
+// // console.log(geocodess,'geocodess');
+// // maker(geocodess);
+// // Driving(geocodess);
+// // }
+// // 修改过
+// console.log(geocodess,'geocodess');
+// maker(geocodess);
+// Driving(geocodess);
+// }
+// });
+// });
+// }
+// }
async function init(data) {
- await details.mapLoc.clearMap(); //重置地图标记
- // maplabel()
- console.log(details.mapLoc);
+ if (!details.mapLoc) {
+ return; // 如果没有地图对象，则直接返回
+ }
+
+ await details.mapLoc.clearMap(); // 重置地图标记
let geocodess = [];
- var geocoder = new AMap.Geocoder({});
- data.map(async (item, index) => {
+ const geocoder = new AMap.Geocoder({});
+ details.markersarr = []; // 确保这是一个空数组
+
+ // 使用 for...of 循环替代 map，因为需要异步操作
+ for (let item of data) {
if (!item.jingdu || !item.weidu) {
- console.log(item.jingdu);
- return ElMessage.warning('地址有问题');
+ ElMessage.warning('地址有问题');
+ continue; // 如果经纬度有问题，跳过此次循环
}
- var marker = new AMap.Marker({
+
+ const marker = new AMap.Marker({
map: details.mapLoc,
position: [item.jingdu, item.weidu],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
});
+
await marker.setMap(details.mapLoc);
- await marker.setLabel({
- offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
- content: `
${item.warehouseName}
`, //设置文本标注内容
- direction: 'top', //设置文本标注方位
+ marker.setLabel({
+ offset: new AMap.Pixel(0,0), // 设置文本标注偏移量
+ content: `
${item.warehouseName}
`, // 设置文本标注内容
+ direction: 'top', // 设置文本标注方位
});
- // details.markersarr=[]//修改过
- details.markersarr.push(marker);
- await geocoder.getLocation(item.deliveryAddress, (status, result) => {
- console.log(status,'status');
- console.log(result,'result');
- if (status === 'complete' && result.info === 'OK') {
- // result中对应详细地理坐标信息
- details.mapLoc.setCenter([
- result.geocodes[0].location.lng,
- result.geocodes[0].location.lat,
- ]);
- geocodess.push({
- pontion: result.geocodes[0].location,
- content: item.consignee + '--' + item.deliveryAddress + '' + '--' + item.deliveryPhone,
- items: item,
- });
- if (index + 1 == data.length) {
- maker(geocodess);
- Driving(geocodess);
+
+ details.markersarr.push(marker); // 将标记添加到数组中
+ // 对 geocoder.getLocation 的调用现在是同步的，使用 await 等待回调结果
+ const result = await new Promise((resolve) => {
+ geocoder.getLocation(item.deliveryAddress, (status, response) => {
+ if (status === 'complete' && response.info === 'OK') {
+ resolve(response);
+ } else {
+ resolve(null); // 如果获取位置失败，则返回 null
}
- }
+ });
});
- });
+
+ if (result) {
+ details.mapLoc.setCenter([
+ result.geocodes[0].location.lng,
+ result.geocodes[0].location.lat,
+ ]);
+ geocodess.push({
+ pontion: result.geocodes[0].location,
+ content: `${item.consignee}--${item.deliveryAddress}--${item.deliveryPhone}`,
+ items: item,
+ });
+ }
+ }
+
+ if (geocodess.length > 0) {
+ maker(geocodess);
+ Driving(geocodess);
+ }else{
+ Dtloading.value=false
+ }
+
}
//地图标点
-function maker(geocodess) {
- geocodess.map(item => {
+async function maker (geocodess) {
+ await geocodess.map(item => {
if (item.pontion) {
console.log(item, 'item=====');
var marker = new AMap.Marker({
@@ -181,6 +258,8 @@ function maker(geocodess) {
details.markersarr.push(marker);
}
});
+
+ Dtloading.value=false
}
//地图公里数和时间计算
// 假设 seenIds 在适当的作用域中已经初始化
@@ -196,6 +275,7 @@ function Driving(geocodess) {
new AMap.LngLat(item.items.jingdu, item.items.weidu),
new AMap.LngLat(item.pontion.lng, item.pontion.lat),
function (status, result) {
+ console.log(status);
if (status === 'complete') {
// console.log(result.routes[0]);
item.time = formatSeconds(result.routes[0].time);
@@ -237,13 +317,15 @@ function back() {
}
const { datalists } = toRefs(details);
const ListChange = val => {
- console.log(val,'val====');
+ Dtloading.value=true
console.log(details.datalists, '最新的数据');
- let data = details.datalists.filter(item => item.isck === true).map(item => item.items);
+ let data = details.datalists.filter(item => item.isck === true).map(item => item.items);
init(data);
Checkthebox.value = data;//统计当前勾选
console.log(details.datalists, '数据');
};
+
+