| | |
| | | <template> |
| | | <div> |
| | | <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false" |
| | | @close="closeClick"> |
| | | :close-on-press-escape="false" :close-on-click-modal="false" @close="closeClick"> |
| | | <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"> |
| | | <el-radio-button label="order">订单信息</el-radio-button> |
| | | <el-radio-button label="track">行程轨迹</el-radio-button> |
| | |
| | | ], |
| | | }) |
| | | .then((AMap) => { |
| | | this.map = new AMap.Map("mapContainer", { |
| | | center: [this.travelData[this.travelData.length / 2].longitude, this.travelData[this.travelData.length / 2].latitude], |
| | | zoom: 12, |
| | | }); |
| | | this.map.addControl(new AMap.ToolBar()); |
| | | let path = this.travelData.map(item => { |
| | | return new AMap.LngLat(item.longitude, item.latitude) |
| | | }) |
| | | const content = `<div class="custom-content-marker"> |
| | | 起点 |
| | | </div>`; |
| | | // 转换 travelData 中的坐标 |
| | | const wgs84Path = this.travelData.map(item => [item.longitude, item.latitude]); |
| | | const batchSize = 40; // 每次转换 40 对坐标 |
| | | const batches = []; |
| | | |
| | | const contentTwo = `<div class="custom-content-marker-two"> |
| | | 终点 |
| | | </div>`; |
| | | const marker = [ |
| | | new AMap.Marker({ |
| | | content: content, //自定义点标记覆盖物内容 |
| | | position: [this.travelData[0].longitude, this.travelData[0].latitude], //基点位置 |
| | | offset: new AMap.Pixel(-35, -25), //相对于基点的偏移位置 |
| | | }), |
| | | new AMap.Marker({ |
| | | content: contentTwo, //自定义点标记覆盖物内容 |
| | | position: [this.travelData[this.travelData.length - 1].longitude, this.travelData[this.travelData.length - 1].latitude], //基点位置 |
| | | offset: new AMap.Pixel(-35, -25), //相对于基点的偏移位置 |
| | | // 分批处理 |
| | | for (let i = 0; i < wgs84Path.length; i += batchSize) { |
| | | batches.push(wgs84Path.slice(i, i + batchSize)); |
| | | } |
| | | |
| | | const gcj02Path = []; |
| | | const promises = batches.map(batch => { |
| | | return new Promise((resolve, reject) => { |
| | | AMap.convertFrom(batch, 'gps', (status, result) => { |
| | | if (status === 'complete' && result.locations) { |
| | | resolve(result.locations); |
| | | } else { |
| | | reject(result); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | |
| | | // 等待所有批次转换完成 |
| | | Promise.all(promises) |
| | | .then(results => { |
| | | results.forEach(batchResult => { |
| | | gcj02Path.push(...batchResult); |
| | | }); |
| | | |
| | | // 开始绘制地图 |
| | | this.map = new AMap.Map("mapContainer", { |
| | | center: gcj02Path[Math.floor(gcj02Path.length / 2)], // 使用转换后的中点坐标 |
| | | zoom: 12, |
| | | }); |
| | | this.map.addControl(new AMap.ToolBar()); |
| | | |
| | | // 添加起点和终点标记 |
| | | const marker = [ |
| | | new AMap.Marker({ |
| | | content: `<div class="custom-content-marker">起点</div>`, |
| | | position: gcj02Path[0], |
| | | offset: new AMap.Pixel(-35, -25), |
| | | }), |
| | | new AMap.Marker({ |
| | | content: `<div class="custom-content-marker-two">终点</div>`, |
| | | position: gcj02Path[gcj02Path.length - 1], |
| | | offset: new AMap.Pixel(-35, -25), |
| | | }), |
| | | ]; |
| | | this.map.add(marker); |
| | | |
| | | // 绘制路径 |
| | | const polyline = new AMap.Polyline({ |
| | | path: gcj02Path, |
| | | strokeWeight: 3, |
| | | strokeColor: "red", |
| | | lineJoin: "round", |
| | | }); |
| | | this.map.add(polyline); |
| | | |
| | | // 强制刷新地图 |
| | | this.$nextTick(() => { |
| | | this.map.resize(); |
| | | }); |
| | | }) |
| | | ] |
| | | this.map.add(marker); |
| | | let polyline = new AMap.Polyline({ |
| | | path: path, |
| | | strokeWeight: 3, //线条宽度 |
| | | strokeColor: "red", //线条颜色 |
| | | lineJoin: "round", //折线拐点连接处样式 |
| | | }); |
| | | this.map.add(polyline); |
| | | // 强制刷新地图 |
| | | this.$nextTick(() => { |
| | | this.map.resize(); |
| | | }); |
| | | .catch(error => { |
| | | console.error('坐标转换失败', error); |
| | | }); |
| | | }) |
| | | .catch((e) => { |
| | | console.log(e); |
| | | }); |
| | | }, |
| | | closeClick() { |