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 107 additions and 36 deletions
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-08 15:56:00 4 + * @LastEditTime: 2024-01-08 17:26:45
5 * @FilePath: /map-demo/src/views/activity.vue 5 * @FilePath: /map-demo/src/views/activity.vue
6 * @Description: 内部地图主体页面 6 * @Description: 内部地图主体页面
7 --> 7 -->
...@@ -47,21 +47,29 @@ ...@@ -47,21 +47,29 @@
47 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem" 47 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
48 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" /> 48 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
49 </div> 49 </div>
50 - <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end"> 50 + <!-- <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end">
51 <template #reference> 51 <template #reference>
52 <div class="item"> 52 <div class="item">
53 <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem" 53 <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
54 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" /> 54 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
55 </div> 55 </div>
56 </template> 56 </template>
57 - </van-popover> 57 + </van-popover> -->
58 58
59 + <div v-if="open_safe_route" class="item" @click="onSingleSelect(true)">
60 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
61 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
62 + </div>
63 + <div v-else class="item" @click="onSingleSelect(false)">
64 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
65 + style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
66 + </div>
59 <!-- <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)"> 67 <!-- <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
60 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem" 68 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
61 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" /> 69 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
62 </div> 70 </div>
63 <div v-else class="item" @click="handleSafeRoute(false)"> 71 <div v-else class="item" @click="handleSafeRoute(false)">
64 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.25rem" 72 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
65 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" /> 73 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
66 </div> --> 74 </div> -->
67 </div> 75 </div>
...@@ -579,37 +587,43 @@ export default { ...@@ -579,37 +587,43 @@ export default {
579 var accuracy = res.accuracy; // 位置精度 587 var accuracy = res.accuracy; // 位置精度
580 this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon; 588 this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
581 this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat; 589 this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
582 - // TODO： 测试暂时屏蔽景区提示 590 + // 判断是否在范围内
583 - // // 判断是否在范围内 591 + if (!this.isPointInRing()) {
584 - // if (!this.isPointInRing()) { 592 + this.dialog_show = true;
585 - // this.dialog_show = true; 593 + this.dialog_text = '您不在景区范围内';
586 - // this.dialog_text = '您不在景区范围内'; 594 + } else {
587 - // } else { 595 + // 使用纠正偏移后的地址，打一个定位标记
588 - // // 使用纠正偏移后的地址，打一个定位标记 596 + this.location_marker = new AMap.LabelMarker({
589 - // this.location_marker = new AMap.LabelMarker({ 597 + icon: {
590 - // icon: { 598 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
591 - // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png', 599 + anchor: 'bottom-center',
592 - // anchor: 'bottom-center', 600 + size: [36, 36],
593 - // size: [36, 36], 601 + },
594 - // }, 602 + position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
595 - // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 603 + });
596 - // }); 604 + this.map.add(this.location_marker);
597 - // this.map.add(this.location_marker); 605 + // 定位到当前位置中心
598 - // // 定位到当前位置中心 606 + this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
599 - // this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]); 607 + }
600 - // } 608 + // // 使用纠正偏移后的地址，打一个定位标记
601 - // 使用纠正偏移后的地址，打一个定位标记 609 + // this.location_marker = new AMap.LabelMarker({
602 - this.location_marker = new AMap.LabelMarker({ 610 + // icon: {
603 - icon: { 611 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
604 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png', 612 + // anchor: 'bottom-center',
605 - anchor: 'bottom-center', 613 + // size: [36, 36],
606 - size: [36, 36], 614 + // },
607 - }, 615 + // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
608 - position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 616 + // });
609 - }); 617 + // this.map.add(this.location_marker);
610 - this.map.add(this.location_marker); 618 + // // 定位到当前位置中心
611 - // 定位到当前位置中心 619 + // this.map.setZoomAndCenter(this.zoom, [+this.current_lng, +this.current_lat]);
612 - this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]); 620 + },
621 + fail: () => {
622 + // 获取失败
623 + if (!this.current_lng || !this.current_lat) {
624 + this.dialog_show = true;
625 + this.dialog_text = '获取经纬度失败';
626 + }
613 }, 627 },
614 complete: () => { 628 complete: () => {
615 // 获取失败 629 // 获取失败
...@@ -1398,6 +1412,62 @@ export default { ...@@ -1398,6 +1412,62 @@ export default {
1398 this.addActivityRoutes(paths); 1412 this.addActivityRoutes(paths);
1399 } 1413 }
1400 }, 1414 },
1415 + onSingleSelect (status) {
1416 + if (status) {
1417 + let path = [];
1418 + let paths = [];
1419 + paths = [
1420 + [
1421 + [120.585639,31.315347],
1422 + [120.58587,31.315323],
1423 + [120.586367,31.315471],
1424 + [120.587187,31.31559],
1425 + [120.587241,31.315019],
1426 + [120.587344,31.314953],
1427 + [120.587427,31.314914],
1428 + [120.587454,31.314761],
1429 + [120.587823,31.314803],
1430 + [120.587847,31.314736],
1431 + [120.588217,31.314775],
1432 + ],
1433 + [
1434 + [120.585639,31.315347],
1435 + [120.58587,31.315323],
1436 + [120.586367,31.315471],
1437 + [120.587187,31.31559],
1438 + [120.587565,31.315635],
1439 + [120.587922,31.315674],
1440 + [120.587929,31.315467],
1441 + [120.588114,31.315472],
1442 + [120.588171,31.315006],
1443 + [120.588217,31.314775],
1444 + ],
1445 + [
1446 + [120.585639,31.315347],
1447 + [120.585751,31.315309],
1448 + [120.585904,31.314415],
1449 + [120.586733,31.314471],
1450 + [120.586745,31.314403],
1451 + [120.587186,31.31433],
1452 + [120.587249,31.314302],
1453 + [120.587863,31.314389],
1454 + [120.587846,31.314733],
1455 + ]
1456 + ];
1457 + this.show_activity_route = true;
1458 + //
1459 + if (path.length) {
1460 + this.addActivityRoute(path);
1461 + }
1462 + if (paths.length) {
1463 + this.addActivityRoutes(paths);
1464 + }
1465 + this.open_safe_route = false;
1466 + } else {
1467 + this.removeActivityRoute()
1468 + this.open_safe_route = true;
1469 + }
1470 + },
1401 addActivityRoute(path) { // 新增路径 1471 addActivityRoute(path) { // 新增路径
1402 this.map.remove([...this.current_activity_route]); // 删除地图折线 1472 this.map.remove([...this.current_activity_route]); // 删除地图折线
1403 this.map.remove(this.route_activity_marker); // 删除起始点标记 1473 this.map.remove(this.route_activity_marker); // 删除起始点标记
...@@ -1531,6 +1601,7 @@ export default { ...@@ -1531,6 +1601,7 @@ export default {
1531 this.map.add(this.route_activity_marker); 1601 this.map.add(this.route_activity_marker);
1532 }, 1602 },
1533 removeActivityRoute() { // 移除地图路线 1603 removeActivityRoute() { // 移除地图路线
1604 + this.open_safe_route = true;
1534 this.show_activity_route = false; 1605 this.show_activity_route = false;
1535 this.map.remove([...this.current_activity_route]); // 删除地图折线 1606 this.map.remove([...this.current_activity_route]); // 删除地图折线
1536 this.map.remove(this.route_activity_marker); // 删除起始点标记 1607 this.map.remove(this.route_activity_marker); // 删除起始点标记
......