Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3ed455f2 1 parent 419e5251

定位功能调整

Inline Side-by-side
Showing 3 changed files with 429 additions and 281 deletions
1 /* 1 /*
2 * @Date: 2023-07-21 14:25:45 2 * @Date: 2023-07-21 14:25:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-24 11:25:29 4 + * @LastEditTime: 2023-07-24 22:35:08
5 * @FilePath: /map-demo/src/common/inner_router.js 5 * @FilePath: /map-demo/src/common/inner_router.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -21,12 +21,29 @@ const testInfo = [ ...@@ -21,12 +21,29 @@ const testInfo = [
21 [120.587233, 31.314961], 21 [120.587233, 31.314961],
22 [120.587205, 31.315508], 22 [120.587205, 31.315508],
23 [120.587197, 31.315602], 23 [120.587197, 31.315602],
24 - [120.587564, 31.315631], 24 + [120.587563, 31.315637],
25 + [120.587549, 31.315865],
26 + ],
27 + distance: '',
28 + },
29 + {
30 + id: 0,
31 + path: [
32 + [120.588288, 31.314212],
33 + [120.587711, 31.314184],
34 + [120.587694, 31.314368],
35 + [120.587662, 31.314585],
36 + [120.587474, 31.314573],
37 + [120.587453, 31.314773],
38 + [120.58765, 31.314786],
39 + [120.587453, 31.314773],
40 + [120.587422, 31.314937],
41 + [120.587233, 31.314961],
42 + [120.587205, 31.315508],
25 [120.587197, 31.315602], 43 [120.587197, 31.315602],
26 - [120.586621, 31.315511], 44 + [120.586619, 31.315514],
27 - [120.586368, 31.315492], 45 + [120.58612, 31.315377],
28 - [120.586123, 31.315362], 46 + [120.585628, 31.315353],
29 - [120.585778, 31.31531],
30 ], 47 ],
31 distance: '', 48 distance: '',
32 }, 49 },
...@@ -74,34 +91,78 @@ const testInfo = [ ...@@ -74,34 +91,78 @@ const testInfo = [
74 [120.586816, 31.314399], 91 [120.586816, 31.314399],
75 [120.586747, 31.314405], 92 [120.586747, 31.314405],
76 [120.586738, 31.314469], 93 [120.586738, 31.314469],
77 - [120.585985, 31.314409], 94 + [120.586424, 31.314448],
78 - [120.585984, 31.314337], 95 + [120.586466, 31.314068],
79 - [120.585887, 31.314318], 96 + [120.586472, 31.31381],
80 - [120.585895, 31.314159], 97 + [120.586494, 31.313578],
81 - [120.585598, 31.314131], 98 + [120.586522, 31.313195],
82 - [120.585412, 31.314195], 99 + ],
83 - [120.585225, 31.314164], 100 + distance: '',
84 - [120.585152, 31.314032], 101 + },
85 - [120.585234, 31.313942], 102 + {
86 - [120.585311, 31.313884], 103 + id: 3,
87 - [120.585415, 31.313934], 104 + path: [
88 - [120.585601, 31.313955], 105 + [120.588191, 31.314226],
89 - [120.585889, 31.313961], 106 + [120.587711, 31.314177],
90 - [120.586052, 31.31397], 107 + [120.587691, 31.314343],
91 - [120.586081, 31.313569], 108 + [120.587239, 31.314309],
92 - [120.586081, 31.313569], 109 + [120.586816, 31.314399],
93 - [120.585678, 31.313533], 110 + [120.586747, 31.314405],
94 - [120.586081, 31.313569], 111 + [120.586738, 31.314469],
95 - [120.586083, 31.31353], 112 + [120.586424, 31.314448],
96 - [120.58643, 31.313572], 113 + [120.585995, 31.314408],
97 - [120.586083, 31.31353], 114 + [120.585996, 31.314362],
98 - [120.586094, 31.3134], 115 + [120.585862, 31.314356],
99 - [120.585709, 31.313362], 116 + [120.585654, 31.314337],
100 - [120.586094, 31.3134], 117 + [120.585534, 31.314196],
101 - [120.586101, 31.313334], 118 + [120.585375, 31.314183],
102 - [120.586365, 31.31335], 119 + [120.585192, 31.314135],
103 - [120.586101, 31.313334], 120 + [120.585152, 31.314019],
104 - [120.586118, 31.313165], 121 + [120.585285, 31.313893],
122 + [120.585414, 31.313943],
123 + [120.5856, 31.313955],
124 + [120.585902, 31.313956],
125 + ],
126 + distance: '',
127 + },
128 + {
129 + id: 3,
130 + path: [
131 + [120.588191, 31.314226],
132 + [120.587711, 31.314177],
133 + [120.587691, 31.314343],
134 + [120.587239, 31.314309],
135 + [120.586816, 31.314399],
136 + [120.586747, 31.314405],
137 + [120.586738, 31.314469],
138 + [120.586424, 31.314448],
139 + [120.585995, 31.314403],
140 + [120.586075, 31.313569],
141 + [120.586086, 31.313265],
142 + [120.586142, 31.313178],
143 + ],
144 + distance: '',
145 + },
146 + {
147 + id: 3,
148 + path: [
149 + [120.588191, 31.314226],
150 + [120.587711, 31.314177],
151 + [120.587691, 31.314343],
152 + [120.587239, 31.314309],
153 + [120.586816, 31.314399],
154 + [120.586747, 31.314405],
155 + [120.586738, 31.314469],
156 + [120.586424, 31.314448],
157 + [120.585995, 31.314403],
158 + [120.585996, 31.314263],
159 + [120.585906, 31.314257],
160 + [120.585915, 31.313951],
161 + [120.58566, 31.313935],
162 + [120.585666, 31.313733],
163 + [120.585695, 31.313533],
164 + [120.585718, 31.313344],
165 + [120.585752, 31.313091],
105 ], 166 ],
106 distance: '', 167 distance: '',
107 }, 168 },
......
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: 2023-07-21 14:29:26 4 + * @LastEditTime: 2023-07-24 22:27:44
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 - * @Description: 地图主体页面 6 + * @Description: 公众地图主体页面
7 --> 7 -->
8 <template> 8 <template>
9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;"> 9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
...@@ -36,10 +36,14 @@ ...@@ -36,10 +36,14 @@
36 </div> 36 </div>
37 <div class="operate-bar-wrapper"> 37 <div class="operate-bar-wrapper">
38 <div class="box-wrapper"> 38 <div class="box-wrapper">
39 - <!-- <div class="item" @click="setLocation"> 39 + <div v-if="open_current_location" class="item" @click="handleLocation(true)">
40 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" 40 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
41 style="vertical-align: middle;" /> 41 style="vertical-align: middle;" />
42 - </div> --> 42 + </div>
43 + <div v-else class="item" @click="handleLocation(false)">
44 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
45 + style="vertical-align: middle;" />
46 + </div>
43 <!-- <div class="item" @click="selectRoute"> 47 <!-- <div class="item" @click="selectRoute">
44 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" 48 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
45 style="vertical-align: middle;" /> 49 style="vertical-align: middle;" />
...@@ -62,7 +66,7 @@ ...@@ -62,7 +66,7 @@
62 关闭步行导航 66 关闭步行导航
63 </div> 67 </div>
64 68
65 - <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }"> 69 + <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
66 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" /> 70 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
67 <div class="popup-wrapper"> 71 <div class="popup-wrapper">
68 <div class="title"> 72 <div class="title">
...@@ -73,7 +77,7 @@ ...@@ -73,7 +77,7 @@
73 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" 77 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
74 :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player> 78 :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
75 </div> 79 </div>
76 - </van-popup> 80 + </van-popup> -->
77 81
78 <van-dialog v-model:show="dialog_show" title="温馨提示"> 82 <van-dialog v-model:show="dialog_show" title="温馨提示">
79 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div> 83 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
...@@ -106,8 +110,8 @@ import InfoWindowLite from '@/components/InfoWindowLite' ...@@ -106,8 +110,8 @@ import InfoWindowLite from '@/components/InfoWindowLite'
106 import InfoWindowWarn from '@/components/InfoWindowWarn' 110 import InfoWindowWarn from '@/components/InfoWindowWarn'
107 import audioBackground from '@/components/audioBackground' 111 import audioBackground from '@/components/audioBackground'
108 import { useRect } from '@vant/use'; 112 import { useRect } from '@vant/use';
109 -
110 import { mapAPI } from '@/api/map.js' 113 import { mapAPI } from '@/api/map.js'
114 +import wx from 'weixin-js-sdk'
111 115
112 const GPS = { 116 const GPS = {
113 PI: 3.14159265358979324, 117 PI: 3.14159265358979324,
...@@ -196,7 +200,7 @@ export default { ...@@ -196,7 +200,7 @@ export default {
196 current_lat: '', 200 current_lat: '',
197 current_route: '', 201 current_route: '',
198 current_safe_route: '', 202 current_safe_route: '',
199 - show_popup: false, 203 + // show_popup: false,
200 dialog_show: false, 204 dialog_show: false,
201 dialog_text: '', 205 dialog_text: '',
202 walk_route: '', 206 walk_route: '',
...@@ -222,24 +226,24 @@ export default { ...@@ -222,24 +226,24 @@ export default {
222 navList: [], 226 navList: [],
223 navKey: '', 227 navKey: '',
224 markerSum: [], // marker合集 228 markerSum: [], // marker合集
225 - titleLayerSet: { 229 + // titleLayerSet: {
226 - 17: { 230 + // 17: {
227 - x: [109439, 109441], 231 + // x: [109439, 109441],
228 - y: [53519, 53521] 232 + // y: [53519, 53521]
229 - }, 233 + // },
230 - 18: { 234 + // 18: {
231 - x: [218879, 218882], 235 + // x: [218879, 218882],
232 - y: [107039, 107042] 236 + // y: [107039, 107042]
233 - } 237 + // }
234 - }, 238 + // },
235 defaultZoom: 18, 239 defaultZoom: 18,
236 defaultCenter: [120.587382, 31.313900], 240 defaultCenter: [120.587382, 31.313900],
237 - mapTiles: [] 241 + mapTiles: [],
242 + open_current_location: true,
238 } 243 }
239 }, 244 },
240 async mounted() { 245 async mounted() {
241 const code = this.$route.query.id; 246 const code = this.$route.query.id;
242 - // const code = '362800';
243 const { data } = await mapAPI({ i: code }); 247 const { data } = await mapAPI({ i: code });
244 data.list = data.list.concat(map_alert); 248 data.list = data.list.concat(map_alert);
245 this.navBarList = data.list; // 底部导航条 249 this.navBarList = data.list; // 底部导航条
...@@ -249,25 +253,31 @@ export default { ...@@ -249,25 +253,31 @@ export default {
249 // 初始化地图 253 // 初始化地图
250 this.initMap(); 254 this.initMap();
251 // this.setMapBoundary(); 255 // this.setMapBoundary();
252 - // 使用之前都要再获取一下地址 256 + // 使用之前获取当前地址，判断当前是否能够获取经纬度
253 - this.getLocation() 257 + wx.getLocation({
258 + type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
259 + success: (res) => {
260 + var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
261 + var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
262 + var speed = res.speed; // 速度，以米/每秒计
263 + var accuracy = res.accuracy; // 位置精度
264 + this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
265 + this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
266 + },
267 + });
254 // 设置贴片地图 268 // 设置贴片地图
255 this.setTitleLayer(); 269 this.setTitleLayer();
256 - // 每隔5分钟刷新地图
257 - setInterval(() => {
258 - this.map.resize();
259 - }, 1000 * 60 * 5);
260 }, 270 },
261 watch: { 271 watch: {
262 - show_popup(val) { 272 + // show_popup(val) {
263 - if (!val) { 273 + // if (!val) {
264 - this.$nextTick(() => { 274 + // this.$nextTick(() => {
265 - // 弹框关闭时，暂停视频 275 + // // 弹框关闭时，暂停视频
266 - $('.vjs-tech')[0].pause(); 276 + // $('.vjs-tech')[0].pause();
267 - $('.vjs-tech')[0].currentTime = 0; 277 + // $('.vjs-tech')[0].currentTime = 0;
268 - }) 278 + // })
269 - } 279 + // }
270 - }, 280 + // },
271 showInfoWindow(val) { 281 showInfoWindow(val) {
272 if (val) { 282 if (val) {
273 // 元素的大小及其相对于视口的位置 283 // 元素的大小及其相对于视口的位置
...@@ -455,45 +465,115 @@ export default { ...@@ -455,45 +465,115 @@ export default {
455 // fillColor: '#CFE7AA' 465 // fillColor: '#CFE7AA'
456 // }); 466 // });
457 // }, 467 // },
458 - // isPointInRing() { // 是否在景区范围 468 + isPointInRing() { // 是否在景区范围
459 - // let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [ 469 + let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
460 - // [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005] 470 + [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
461 - // ]); 471 + ]);
462 - // return isPointInRing 472 + return isPointInRing
463 - // }, 473 + },
464 - // setLocation() { // 开启定位服务 474 + setLocation() { // 开启定位服务
465 - // // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置 475 + // 获取失败
466 - // if (!this.current_lng || !this.current_lat) { 476 + if (!this.current_lng || !this.current_lat) {
467 - // this.getLocation() 477 + this.dialog_show = true;
468 - // } else { 478 + this.dialog_text = '获取经纬度失败';
469 - // // 使用纠正偏移后的地址，打一个定位标记 479 + }
470 - // var marker = new AMap.Marker({ 480 + this.getLocation();
471 - // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 481 + // // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
472 - // }); 482 + // if (!this.current_lng || !this.current_lat) {
473 - // this.map.add(marker); 483 + // this.getLocation()
474 - // // 定位到地图中心-西园寺 484 + // } else {
475 - // this.map.setCenter([120.587334, 31.314823]); 485 + // // 判断是否在范围内
476 - // // 判断是否在范围内 486 + // if (!this.isPointInRing()) {
477 - // if (!this.isPointInRing()) { 487 + // this.dialog_show = true;
478 - // this.dialog_show = true; 488 + // this.dialog_text = '您不在景区范围内';
479 - // this.dialog_text = '您不在景区范围内'; 489 + // } else {
480 - // } 490 + // // this.current_lng = '120.587643'
481 - // } 491 + // // this.current_lat = '31.314853'
482 - // }, 492 + // // 使用纠正偏移后的地址，打一个定位标记
493 + // this.location_marker = new AMap.LabelMarker({
494 + // icon: {
495 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
496 + // anchor: 'bottom-center',
497 + // size: [36, 36],
498 + // },
499 + // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
500 + // });
501 + // this.map.add(this.location_marker);
502 + // // 定位到当前位置中心
503 + // this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
504 + // }
505 + // }
506 + },
507 + handleLocation(status) { // 打开/关闭 当前定位
508 + if (status) {
509 + this.setLocation()
510 + this.open_current_location = false;
511 + } else {
512 + this.removeLocation()
513 + this.open_current_location = true;
514 + }
515 + },
516 + removeLocation() { // 移除定位标记
517 + this.current_lng = '';
518 + this.current_lat = '';
519 + this.map.remove(this.location_marker); // 删除当前定位标记
520 + },
483 getLocation() { // 获取经纬度 521 getLocation() { // 获取经纬度
484 - AMap.plugin(['AMap.Geolocation'], () => { 522 + // AMap.plugin(['AMap.Geolocation'], () => {
485 - this.geolocation = new AMap.Geolocation(this.location_options); 523 + // this.geolocation = new AMap.Geolocation(this.location_options);
486 - this.geolocation.getCurrentPosition((status, result) => { 524 + // this.geolocation.getCurrentPosition((status, result) => {
487 - if (status === 'complete') { 525 + // if (status === 'complete') {
488 - let lat = result.position.lat; 526 + // let lat = result.position.lat;
489 - let lng = result.position.lng; 527 + // let lng = result.position.lng;
490 - // 行动路线 528 + // // 行动路线
491 - if (lng && lat) { 529 + // if (lng && lat) {
492 - this.current_lng = GPS.gcj_encrypt(lat, lng).lon; 530 + // // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
493 - this.current_lat = GPS.gcj_encrypt(lat, lng).lat; 531 + // // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
494 - } 532 + // this.current_lng = lng;
533 + // this.current_lat = lat;
534 + // }
535 + // } else {
536 + // console.warn('获取失败');
537 + // }
538 + // })
539 + // });
540 + // PC端无法获取定位
541 + // 微信获取地址
542 + wx.getLocation({
543 + type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
544 + success: (res) => {
545 + var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
546 + var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
547 + var speed = res.speed; // 速度，以米/每秒计
548 + var accuracy = res.accuracy; // 位置精度
549 + this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
550 + this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
551 + // 判断是否在范围内
552 + if (!this.isPointInRing()) {
553 + this.dialog_show = true;
554 + this.dialog_text = '您不在景区范围内';
555 + } else {
556 + // 使用纠正偏移后的地址，打一个定位标记
557 + this.location_marker = new AMap.LabelMarker({
558 + icon: {
559 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
560 + anchor: 'bottom-center',
561 + size: [36, 36],
562 + },
563 + position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
564 + });
565 + this.map.add(this.location_marker);
566 + // 定位到当前位置中心
567 + this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
495 } 568 }
496 - }) 569 + },
570 + complete: () => {
571 + // 获取失败
572 + if (!this.current_lng || !this.current_lat) {
573 + this.dialog_show = true;
574 + this.dialog_text = '获取经纬度失败';
575 + }
576 + },
497 }); 577 });
498 }, 578 },
499 setZoom(type) { // 设置放大缩小地图 579 setZoom(type) { // 设置放大缩小地图
...@@ -691,20 +771,22 @@ export default { ...@@ -691,20 +771,22 @@ export default {
691 zIndex: 50 771 zIndex: 50
692 }) 772 })
693 this.map.add([this.current_route]); 773 this.map.add([this.current_route]);
694 - this.location_marker = new AMap.Marker({ 774 + // 获取定位打标记
695 - icon: new AMap.Icon({ 775 + this.setLocation();
696 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png', 776 + // this.location_marker = new AMap.Marker({
697 - size: new AMap.Size(40, 40), 777 + // icon: new AMap.Icon({
698 - // 图标所用图片大小 778 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
699 - imageSize: new AMap.Size(40, 40), 779 + // size: new AMap.Size(40, 40),
700 - // 图标取图偏移量 780 + // // 图标所用图片大小
701 - imageOffset: new AMap.Pixel(0, 0) 781 + // imageSize: new AMap.Size(40, 40),
702 - }), 782 + // // 图标取图偏移量
703 - position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 783 + // imageOffset: new AMap.Pixel(0, 0)
704 - anchor: 'bottom-center', 784 + // }),
705 - offset: new AMap.Pixel(0, 0) 785 + // position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
706 - }); 786 + // anchor: 'bottom-center',
707 - this.map.add([this.location_marker]); 787 + // offset: new AMap.Pixel(0, 0)
788 + // });
789 + // this.map.add([this.location_marker]);
708 // 关闭导航提示 790 // 关闭导航提示
709 this.show_walk_route = false; 791 this.show_walk_route = false;
710 }, 792 },
...@@ -724,6 +806,29 @@ export default { ...@@ -724,6 +806,29 @@ export default {
724 } 806 }
725 }, 807 },
726 setTitleLayer() { // 生成瓦片图 808 setTitleLayer() { // 生成瓦片图
809 + // 获取瓦片图渲染范围
810 + function getFirstProperty(obj) {
811 + for (var prop in obj) {
812 + return prop;
813 + }
814 + }
815 + function getLastProperty(obj) {
816 + var props = [];
817 + for (var prop in obj) {
818 + props.push(prop);
819 + }
820 + return props[props.length - 1];
821 + }
822 + let obj_scope = {};
823 + for (const key in this.mapTiles) {
824 + const element = this.mapTiles[key];
825 + let first = getFirstProperty(element).split('-');
826 + let last = getLastProperty(element).split('-');
827 + obj_scope[key] = {
828 + x: [first[0], last[0]],
829 + y: [first[1], last[1]]
830 + }
831 + }
727 const _this = this; 832 const _this = this;
728 var layer = new AMap.TileLayer.Flexible({ 833 var layer = new AMap.TileLayer.Flexible({
729 cacheSize: 50, 834 cacheSize: 50,
...@@ -731,9 +836,9 @@ export default { ...@@ -731,9 +836,9 @@ export default {
731 zIndex: 100, 836 zIndex: 100,
732 createTile: function (x, y, z, success, fail) { 837 createTile: function (x, y, z, success, fail) {
733 // 控制地图等级显示图片范围-过滤不显示的图层渲染 838 // 控制地图等级显示图片范围-过滤不显示的图层渲染
734 - for (const id in _this.titleLayerSet) { 839 + for (const id in obj_scope) {
735 if (z == id) { 840 if (z == id) {
736 - const scope = _this.titleLayerSet[id]; 841 + const scope = obj_scope[id];
737 if (x < scope.x[0] || x > scope.x[1]) { 842 if (x < scope.x[0] || x > scope.x[1]) {
738 fail() 843 fail()
739 return; 844 return;
......
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: 2023-07-24 16:11:12 4 + * @LastEditTime: 2023-07-25 05:53:53
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 - * @Description: 地图主体页面 6 + * @Description: 内部地图主体页面
7 --> 7 -->
8 <template> 8 <template>
9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;"> 9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
...@@ -36,8 +36,12 @@ ...@@ -36,8 +36,12 @@
36 </div> 36 </div>
37 <div class="operate-bar-wrapper"> 37 <div class="operate-bar-wrapper">
38 <div class="box-wrapper"> 38 <div class="box-wrapper">
39 - <div class="item" @click="setLocation"> 39 + <div v-if="open_current_location" class="item" @click="handleLocation(true)">
40 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" 40 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
41 + style="vertical-align: middle;" />
42 + </div>
43 + <div v-else class="item" @click="handleLocation(false)">
44 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
41 style="vertical-align: middle;" /> 45 style="vertical-align: middle;" />
42 </div> 46 </div>
43 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)"> 47 <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
...@@ -58,7 +62,7 @@ ...@@ -58,7 +62,7 @@
58 关闭步行导航 62 关闭步行导航
59 </div> 63 </div>
60 64
61 - <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }"> 65 + <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
62 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" /> 66 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
63 <div class="popup-wrapper"> 67 <div class="popup-wrapper">
64 <div class="title"> 68 <div class="title">
...@@ -69,7 +73,7 @@ ...@@ -69,7 +73,7 @@
69 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" 73 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
70 :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player> 74 :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
71 </div> 75 </div>
72 - </van-popup> 76 + </van-popup> -->
73 77
74 <van-dialog v-model:show="dialog_show" title="温馨提示"> 78 <van-dialog v-model:show="dialog_show" title="温馨提示">
75 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div> 79 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
...@@ -86,8 +90,6 @@ ...@@ -86,8 +90,6 @@
86 <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo" 90 <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
87 :rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard> 91 :rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard>
88 92
89 - <!-- <audioBackground></audioBackground> -->
90 -
91 <van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }"> 93 <van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
92 <van-icon name="cross" size="1.35rem" @click="closeMember" style="float: right; color: gray; margin-right: 1rem;" /> 94 <van-icon name="cross" size="1.35rem" @click="closeMember" style="float: right; color: gray; margin-right: 1rem;" />
93 <div id="member-list" class="popup-wrapper" style="clear: both;"> 95 <div id="member-list" class="popup-wrapper" style="clear: both;">
...@@ -129,11 +131,8 @@ import InfoWindow from '@/components/InfoWindow' ...@@ -129,11 +131,8 @@ import InfoWindow from '@/components/InfoWindow'
129 import InfoWindowLite from '@/components/InfoWindowLite' 131 import InfoWindowLite from '@/components/InfoWindowLite'
130 import InfoWindowWarn from '@/components/InfoWindowWarn' 132 import InfoWindowWarn from '@/components/InfoWindowWarn'
131 import InfoWindowYard from '@/components/InfoWindowYard' 133 import InfoWindowYard from '@/components/InfoWindowYard'
132 -import audioBackground from '@/components/audioBackground'
133 import { useRect } from '@vant/use'; 134 import { useRect } from '@vant/use';
134 -
135 import { mapAPI } from '@/api/map.js' 135 import { mapAPI } from '@/api/map.js'
136 -
137 import wx from 'weixin-js-sdk' 136 import wx from 'weixin-js-sdk'
138 137
139 const GPS = { 138 const GPS = {
...@@ -197,33 +196,33 @@ export default { ...@@ -197,33 +196,33 @@ export default {
197 data() { 196 data() {
198 return { 197 return {
199 map: '', 198 map: '',
200 - location_options: { 199 + // location_options: {
201 - 'showButton': true, // 是否显示定位按钮 200 + // 'showButton': true, // 是否显示定位按钮
202 - 'buttonPosition': 'LB', // 定位按钮的位置 201 + // 'buttonPosition': 'LB', // 定位按钮的位置
203 - /* LT LB RT RB */ 202 + // /* LT LB RT RB */
204 - 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离 203 + // 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
205 - 'showMarker': true, // 是否显示定位点 204 + // 'showMarker': true, // 是否显示定位点
206 - 'markerOptions': { // 自定义定位点样式，同Marker的Options 205 + // 'markerOptions': { // 自定义定位点样式，同Marker的Options
207 - 'offset': new AMap.Pixel(-18, -36), 206 + // 'offset': new AMap.Pixel(-18, -36),
208 - 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>' 207 + // 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
209 - }, 208 + // },
210 - 'showCircle': true, // 是否显示定位精度圈 209 + // 'showCircle': true, // 是否显示定位精度圈
211 - 'circleOptions': { // 定位精度圈的样式 210 + // 'circleOptions': { // 定位精度圈的样式
212 - 'strokeColor': '#0093FF', 211 + // 'strokeColor': '#0093FF',
213 - 'noSelect': true, 212 + // 'noSelect': true,
214 - 'strokeOpacity': 0.5, 213 + // 'strokeOpacity': 0.5,
215 - 'strokeWeight': 1, 214 + // 'strokeWeight': 1,
216 - 'fillColor': '#02B0FF', 215 + // 'fillColor': '#02B0FF',
217 - 'fillOpacity': 0.25 216 + // 'fillOpacity': 0.25
218 - }, 217 + // },
219 - enableHighAccuracy: true 218 + // enableHighAccuracy: true
220 - }, 219 + // },
221 geolocation: '', 220 geolocation: '',
222 current_lng: '', 221 current_lng: '',
223 current_lat: '', 222 current_lat: '',
224 current_route: '', 223 current_route: '',
225 current_safe_route: '', 224 current_safe_route: '',
226 - show_popup: false, 225 + // show_popup: false,
227 show_member_popup: false, 226 show_member_popup: false,
228 dialog_show: false, 227 dialog_show: false,
229 dialog_text: '', 228 dialog_text: '',
...@@ -234,9 +233,9 @@ export default { ...@@ -234,9 +233,9 @@ export default {
234 route_safe_marker: [], 233 route_safe_marker: [],
235 open_safe_route: true, 234 open_safe_route: true,
236 show_walk_route: true, 235 show_walk_route: true,
237 - popup_title: '', 236 + // popup_title: '',
238 - popup_content: '', 237 + // popup_content: '',
239 - video_src: '', 238 + // video_src: '',
240 show_nav_popup: false, 239 show_nav_popup: false,
241 showInfoWindow: false, 240 showInfoWindow: false,
242 showInfoWindowLite: false, 241 showInfoWindowLite: false,
...@@ -265,6 +264,10 @@ export default { ...@@ -265,6 +264,10 @@ export default {
265 defaultZoom: 18, 264 defaultZoom: 18,
266 defaultCenter: [120.587382, 31.313900], 265 defaultCenter: [120.587382, 31.313900],
267 mapTiles: [], 266 mapTiles: [],
267 + open_current_location: true,
268 + point_range: [ // 景区范围经纬度
269 + [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
270 + ]
268 } 271 }
269 }, 272 },
270 async mounted() { 273 async mounted() {
...@@ -279,21 +282,31 @@ export default { ...@@ -279,21 +282,31 @@ export default {
279 // 初始化地图 282 // 初始化地图
280 this.initMap(); 283 this.initMap();
281 // this.setMapBoundary(); 284 // this.setMapBoundary();
282 - // 使用之前都要再获取一下地址 285 + // 使用之前获取当前地址，判断当前是否能够获取经纬度
283 - this.getLocation() 286 + wx.getLocation({
287 + type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
288 + success: (res) => {
289 + var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
290 + var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
291 + var speed = res.speed; // 速度，以米/每秒计
292 + var accuracy = res.accuracy; // 位置精度
293 + this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
294 + this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
295 + },
296 + });
284 // 设置贴片地图 297 // 设置贴片地图
285 this.setTitleLayer(); 298 this.setTitleLayer();
286 }, 299 },
287 watch: { 300 watch: {
288 - show_popup(val) { 301 + // show_popup(val) {
289 - if (!val) { 302 + // if (!val) {
290 - this.$nextTick(() => { 303 + // this.$nextTick(() => {
291 - // 弹框关闭时，暂停视频 304 + // // 弹框关闭时，暂停视频
292 - $('.vjs-tech')[0].pause(); 305 + // $('.vjs-tech')[0].pause();
293 - $('.vjs-tech')[0].currentTime = 0; 306 + // $('.vjs-tech')[0].currentTime = 0;
294 - }) 307 + // })
295 - } 308 + // }
296 - }, 309 + // },
297 showInfoWindow(val) { 310 showInfoWindow(val) {
298 if (val) { 311 if (val) {
299 // 元素的大小及其相对于视口的位置 312 // 元素的大小及其相对于视口的位置
...@@ -381,49 +394,6 @@ export default { ...@@ -381,49 +394,6 @@ export default {
381 } else { 394 } else {
382 marker_icon = entity_info[i].icon; 395 marker_icon = entity_info[i].icon;
383 } 396 }
384 - // var marker = new AMap.ElasticMarker({
385 - // position: entity_info[i].position,
386 - // zooms: [17, 20],
387 - // styles: [{
388 - // icon: {
389 - // // img: marker_icon, // 标记点图标
390 - // img: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 标记点图标
391 - // size: [28, 28], // 可见区域的大小
392 - // anchor: 'bottom-center', // 锚点
393 - // fitZoom: 14, // 最合适的级别
394 - // scaleFactor: 2, // 地图放大一级的缩放比例系数
395 - // maxScale: 1.4, // 最大放大比例
396 - // minScale: 0.8 // 最小放大比例
397 - // },
398 - // label: {
399 - // content: entity_info[i].name,
400 - // position: 'TM',
401 - // // position: 'BM',
402 - // // offset: new AMap.Pixel(0, 10),
403 - // minZoom: 18
404 - // }
405 - // }, {
406 - // icon: {},
407 - // label: {}
408 - // }],
409 - // zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
410 - // });
411 - // if (clickListener) {
412 - // marker.off('click', clickListener)
413 - // }
414 - // // 绑定景点的点击事件 - 文字出现才能触发
415 - // var clickListener = marker.on('click', (e) => {
416 - // // 不同弹框类型
417 - // if (entity_info[i].window_type === 'normal') {
418 - // this.positionMarker(entity_info[i])
419 - // } else if(entity_info[i].window_type === 'lite') {
420 - // this.positionLiteMarker(entity_info[i])
421 - // } else if (entity_info[i].window_type === 'warn') {
422 - // this.positionWarnMarker(entity_info[i])
423 - // }
424 - // })
425 - // // marker合集
426 - // this.markerSum.push(marker);
427 // 创建一个 LabelMarker 实例 397 // 创建一个 LabelMarker 实例
428 var labelMarker = new AMap.LabelMarker({ 398 var labelMarker = new AMap.LabelMarker({
429 position: entity_info[i].position, 399 position: entity_info[i].position,
...@@ -476,10 +446,9 @@ export default { ...@@ -476,10 +446,9 @@ export default {
476 collision: true, // 该层内标注是否避让 446 collision: true, // 该层内标注是否避让
477 allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注 447 allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
478 }); 448 });
479 - // // 将 LabelMarker 实例添加到 LabelsLayer 上 449 + // 将 LabelMarker 实例添加到 LabelsLayer 上
480 labelsLayer.add(labelMarker); 450 labelsLayer.add(labelMarker);
481 // 将 LabelsLayer 添加到地图上 451 // 将 LabelsLayer 添加到地图上
482 - // this.map.add(labelsLayer);
483 this.markerSum.push(labelMarker); 452 this.markerSum.push(labelMarker);
484 }) 453 })
485 this.map.add(this.markerSum); 454 this.map.add(this.markerSum);
...@@ -499,57 +468,51 @@ export default { ...@@ -499,57 +468,51 @@ export default {
499 // }); 468 // });
500 // }, 469 // },
501 isPointInRing() { // 是否在景区范围 470 isPointInRing() { // 是否在景区范围
502 - let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [ 471 + let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], this.point_range);
503 - [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
504 - ]);
505 return isPointInRing 472 return isPointInRing
506 }, 473 },
507 setLocation() { // 开启定位服务 474 setLocation() { // 开启定位服务
508 - // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置 475 + // 获取失败
509 if (!this.current_lng || !this.current_lat) { 476 if (!this.current_lng || !this.current_lat) {
510 - this.getLocation() 477 + this.dialog_show = true;
478 + this.dialog_text = '获取经纬度失败';
479 + }
480 + this.getLocation();
481 + },
482 + handleLocation(status) { // 打开/关闭 当前定位
483 + if (status) {
484 + this.setLocation()
485 + this.open_current_location = false;
511 } else { 486 } else {
512 - // 判断是否在范围内 487 + this.removeLocation()
513 - if (!this.isPointInRing()) { 488 + this.open_current_location = true;
514 - this.dialog_show = true;
515 - this.dialog_text = '您不在景区范围内';
516 - } else {
517 - // this.current_lng = '120.587643'
518 - // this.current_lat = '31.314853'
519 - // 使用纠正偏移后的地址，打一个定位标记
520 - var marker = new AMap.LabelMarker({
521 - icon: {
522 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
523 - anchor: 'bottom-center',
524 - size: [36, 36],
525 - },
526 - position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
527 - });
528 - this.map.add(marker);
529 - // 定位到地图中心-西园寺
530 - this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
531 - }
532 } 489 }
533 }, 490 },
491 + removeLocation() { // 移除定位标记
492 + this.current_lng = '';
493 + this.current_lat = '';
494 + this.map.remove(this.location_marker); // 删除当前定位标记
495 + },
534 getLocation() { // 获取经纬度 496 getLocation() { // 获取经纬度
535 - AMap.plugin(['AMap.Geolocation'], () => { 497 + // AMap.plugin(['AMap.Geolocation'], () => {
536 - this.geolocation = new AMap.Geolocation(this.location_options); 498 + // this.geolocation = new AMap.Geolocation(this.location_options);
537 - this.geolocation.getCurrentPosition((status, result) => { 499 + // this.geolocation.getCurrentPosition((status, result) => {
538 - if (status === 'complete') { 500 + // if (status === 'complete') {
539 - let lat = result.position.lat; 501 + // let lat = result.position.lat;
540 - let lng = result.position.lng; 502 + // let lng = result.position.lng;
541 - // 行动路线 503 + // // 行动路线
542 - if (lng && lat) { 504 + // if (lng && lat) {
543 - // this.current_lng = GPS.gcj_encrypt(lat, lng).lon; 505 + // // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
544 - // this.current_lat = GPS.gcj_encrypt(lat, lng).lat; 506 + // // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
545 - this.current_lng = lng; 507 + // this.current_lng = lng;
546 - this.current_lat = lat; 508 + // this.current_lat = lat;
547 - } 509 + // }
548 - } else { 510 + // } else {
549 - console.warn('获取失败'); 511 + // console.warn('获取失败');
550 - } 512 + // }
551 - }) 513 + // })
552 - }); 514 + // });
515 + // PC端无法获取定位
553 // 微信获取地址 516 // 微信获取地址
554 wx.getLocation({ 517 wx.getLocation({
555 type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' 518 type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
...@@ -560,8 +523,32 @@ export default { ...@@ -560,8 +523,32 @@ export default {
560 var accuracy = res.accuracy; // 位置精度 523 var accuracy = res.accuracy; // 位置精度
561 this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon; 524 this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
562 this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat; 525 this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
563 - console.warn(this.current_lng, this.current_lat); 526 + // 判断是否在范围内
564 - } 527 + if (!this.isPointInRing()) {
528 + this.dialog_show = true;
529 + this.dialog_text = '您不在景区范围内';
530 + } else {
531 + // 使用纠正偏移后的地址，打一个定位标记
532 + this.location_marker = new AMap.LabelMarker({
533 + icon: {
534 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
535 + anchor: 'bottom-center',
536 + size: [36, 36],
537 + },
538 + position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
539 + });
540 + this.map.add(this.location_marker);
541 + // 定位到当前位置中心
542 + this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
543 + }
544 + },
545 + complete: () => {
546 + // 获取失败
547 + if (!this.current_lng || !this.current_lat) {
548 + this.dialog_show = true;
549 + this.dialog_text = '获取经纬度失败';
550 + }
551 + },
565 }); 552 });
566 }, 553 },
567 setZoom(type) { // 设置放大缩小地图 554 setZoom(type) { // 设置放大缩小地图
...@@ -758,20 +745,22 @@ export default { ...@@ -758,20 +745,22 @@ export default {
758 zIndex: 50 745 zIndex: 50
759 }) 746 })
760 this.map.add([this.current_route]); 747 this.map.add([this.current_route]);
761 - this.location_marker = new AMap.Marker({ 748 + // 获取定位打标记
762 - icon: new AMap.Icon({ 749 + this.setLocation();
763 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png', 750 + // this.location_marker = new AMap.Marker({
764 - size: new AMap.Size(40, 40), 751 + // icon: new AMap.Icon({
765 - // 图标所用图片大小 752 + // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
766 - imageSize: new AMap.Size(40, 40), 753 + // size: new AMap.Size(40, 40),
767 - // 图标取图偏移量 754 + // // 图标所用图片大小
768 - imageOffset: new AMap.Pixel(0, 0) 755 + // imageSize: new AMap.Size(40, 40),
769 - }), 756 + // // 图标取图偏移量
770 - position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 757 + // imageOffset: new AMap.Pixel(0, 0)
771 - anchor: 'bottom-center', 758 + // }),
772 - offset: new AMap.Pixel(0, 0) 759 + // position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
773 - }); 760 + // anchor: 'bottom-center',
774 - this.map.add([this.location_marker]); 761 + // offset: new AMap.Pixel(0, 0)
762 + // });
763 + // this.map.add([this.location_marker]);
775 // 关闭导航提示 764 // 关闭导航提示
776 this.show_walk_route = false; 765 this.show_walk_route = false;
777 }, 766 },
...@@ -935,13 +924,6 @@ export default { ...@@ -935,13 +924,6 @@ export default {
935 // this.show_walk_route = true; 924 // this.show_walk_route = true;
936 // }, 925 // },
937 infoWindowLocation(path) { // 监听前往按钮回调 926 infoWindowLocation(path) { // 监听前往按钮回调
938 - // TODO: 实际获取精确定位后导航到位置
939 - // // 判断是否在范围内
940 - // if (!this.isPointInRing()) {
941 - // this.dialog_show = true;
942 - // } else {
943 - // this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
944 - // }
945 // if (this.walk_route) { // 清除前一条步行导航 927 // if (this.walk_route) { // 清除前一条步行导航
946 // this.walk_route.clear(); 928 // this.walk_route.clear();
947 // } 929 // }
......