Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d11040b0 1 parent 6aa78522

fix

Inline Side-by-side
Showing 1 changed file with 95 additions and 24 deletions
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-08 15:56:00
* @LastEditTime: 2024-01-08 17:26:45
* @FilePath: /map-demo/src/views/activity.vue
* @Description: 内部地图主体页面
-->
......@@ -47,21 +47,29 @@
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
<van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end">
<!-- <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end">
<template #reference>
<div class="item">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
</template>
</van-popover>
</van-popover> -->
<div v-if="open_safe_route" class="item" @click="onSingleSelect(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
<div v-else class="item" @click="onSingleSelect(false)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
<!-- <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
<van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
<div v-else class="item" @click="handleSafeRoute(false)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.25rem"
<van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div> -->
</div>
......@@ -579,25 +587,11 @@ export default {
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
// TODO： 测试暂时屏蔽景区提示
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// this.dialog_text = '您不在景区范围内';
// } else {
// // 使用纠正偏移后的地址，打一个定位标记
// this.location_marker = new AMap.LabelMarker({
// icon: {
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
// anchor: 'bottom-center',
// size: [36, 36],
// },
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(this.location_marker);
// // 定位到当前位置中心
// this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
// }
// 判断是否在范围内
if (!this.isPointInRing()) {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
} else {
// 使用纠正偏移后的地址，打一个定位标记
this.location_marker = new AMap.LabelMarker({
icon: {
......@@ -610,6 +604,26 @@ export default {
this.map.add(this.location_marker);
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
}
// // 使用纠正偏移后的地址，打一个定位标记
// this.location_marker = new AMap.LabelMarker({
// icon: {
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
// anchor: 'bottom-center',
// size: [36, 36],
// },
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(this.location_marker);
// // 定位到当前位置中心
// this.map.setZoomAndCenter(this.zoom, [+this.current_lng, +this.current_lat]);
},
fail: () => {
// 获取失败
if (!this.current_lng || !this.current_lat) {
this.dialog_show = true;
this.dialog_text = '获取经纬度失败';
}
},
complete: () => {
// 获取失败
......@@ -1398,6 +1412,62 @@ export default {
this.addActivityRoutes(paths);
}
},
onSingleSelect (status) {
if (status) {
let path = [];
let paths = [];
paths = [
[
[120.585639,31.315347],
[120.58587,31.315323],
[120.586367,31.315471],
[120.587187,31.31559],
[120.587241,31.315019],
[120.587344,31.314953],
[120.587427,31.314914],
[120.587454,31.314761],
[120.587823,31.314803],
[120.587847,31.314736],
[120.588217,31.314775],
],
[
[120.585639,31.315347],
[120.58587,31.315323],
[120.586367,31.315471],
[120.587187,31.31559],
[120.587565,31.315635],
[120.587922,31.315674],
[120.587929,31.315467],
[120.588114,31.315472],
[120.588171,31.315006],
[120.588217,31.314775],
],
[
[120.585639,31.315347],
[120.585751,31.315309],
[120.585904,31.314415],
[120.586733,31.314471],
[120.586745,31.314403],
[120.587186,31.31433],
[120.587249,31.314302],
[120.587863,31.314389],
[120.587846,31.314733],
]
];
this.show_activity_route = true;
//
if (path.length) {
this.addActivityRoute(path);
}
if (paths.length) {
this.addActivityRoutes(paths);
}
this.open_safe_route = false;
} else {
this.removeActivityRoute()
this.open_safe_route = true;
}
},
addActivityRoute(path) { // 新增路径
this.map.remove([...this.current_activity_route]); // 删除地图折线
this.map.remove(this.route_activity_marker); // 删除起始点标记
......@@ -1531,6 +1601,7 @@ export default {
this.map.add(this.route_activity_marker);
},
removeActivityRoute() { // 移除地图路线
this.open_safe_route = true;
this.show_activity_route = false;
this.map.remove([...this.current_activity_route]); // 删除地图折线
this.map.remove(this.route_activity_marker); // 删除起始点标记
......