Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b4861783 1 parent cfb89dd8

新增内部地图

Inline Side-by-side
Showing 4 changed files with 1183 additions and 2 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-07-11 11:01:51 5 + * @LastEditTime: 2023-07-17 15:37:47
6 * @FilePath: /map-demo/src/App.vue 6 * @FilePath: /map-demo/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
......
1 +/*
2 + * @Date: 2023-05-29 11:10:19
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-17 13:24:17
5 + * @FilePath: /map-demo/src/route.js
6 + * @Description: 文件描述
7 + */
1 export default [ 8 export default [
2 { 9 {
3 path: '/', 10 path: '/',
...@@ -13,4 +20,11 @@ export default [ ...@@ -13,4 +20,11 @@ export default [
13 title: '消息中心', 20 title: '消息中心',
14 }, 21 },
15 }, 22 },
23 + {
24 + path: '/inner',
25 + component: () => import('@/views/inner.vue'),
26 + meta: {
27 + title: '内部地图',
28 + },
29 + },
16 ]; 30 ];
......
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-14 15:38:24 4 + * @LastEditTime: 2023-07-17 11:21:15
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
......
1 +<!--
2 + * @Date: 2023-05-19 14:54:27
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-17 17:52:28
5 + * @FilePath: /map-demo/src/views/inner.vue
6 + * @Description: 地图主体页面
7 +-->
8 +<template>
9 + <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
10 + <div id="container"></div>
11 + <div class="nav-bar-wrapper">
12 + <div class="hideScrollBar nav-bar-content">
13 + <div v-for="(item, index) in navBarList" :key="index" :class="[isActive === index ? 'checked' : '', 'item']"
14 + @click="setNavLayer(item, index)">
15 + <van-icon :name="isActive === index ? item.icon[1] : item.icon[0]" size="2rem" /><br />
16 + <span style="font-size: 0.85rem; margin-top: 0rem; display: inline-block;">{{ item.name }}</span>
17 + </div>
18 + <div style="width: 4rem;flex-shrink: 0;"></div>
19 + <div style="position: fixed; right: 0; background-color: white; height: 5.5rem; width: 4rem;">
20 + <div style="padding-top: 40%;">
21 + <van-icon v-if="!show_nav_popup" name="arrow-up" @click="handleNavPopup" size="1.15rem" />
22 + <van-icon v-else name="arrow-down" @click="handleNavPopup" size="1.15rem" />
23 + </div>
24 + </div>
25 + </div>
26 +
27 + <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
28 + :style="{ padding: '1rem', bottom: '4.5rem' }">
29 + <div style="text-align: left;">
30 + <div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
31 + style="margin-bottom: 1rem; font-size: 1.15rem;">
32 + <van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
33 + </div>
34 + </div>
35 + </van-popup>
36 + </div>
37 + <div class="operate-bar-wrapper">
38 + <div class="box-wrapper">
39 + <!-- <div class="item" @click="setLocation">
40 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
41 + style="vertical-align: middle;" />
42 + </div> -->
43 + <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"
45 + style="vertical-align: middle;" />
46 + </div>
47 + <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
48 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
49 + style="vertical-align: middle;" />
50 + </div>
51 + <div v-else class="item" @click="handleSafeRoute(false)">
52 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.25rem"
53 + style="vertical-align: middle;" />
54 + </div>
55 + </div>
56 + </div>
57 +
58 + <!-- <div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
59 + 关闭步行导航
60 + </div> -->
61 + <div v-if="!show_walk_route" @click="removeNavRoute" class="walk-nav-text">
62 + 关闭步行导航
63 + </div>
64 +
65 + <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;" />
67 + <div class="popup-wrapper">
68 + <div class="title">
69 + {{ popup_title }}
70 + </div>
71 + <div class="content" v-html="popup_content"></div>
72 + <video-player ref="videoPlayer" style="width: 100%; height: 30vh; margin-top: 1rem;"
73 + 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>
75 + </div>
76 + </van-popup>
77 +
78 + <van-dialog v-model:show="dialog_show" title="温馨提示">
79 + <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
80 + </van-dialog>
81 +
82 + <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
83 + <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
84 + <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
85 + @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow>
86 + <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
87 + :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
88 + <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
89 + :rect="rect"></InfoWindowWarn>
90 +
91 + <audioBackground></audioBackground>
92 + </div>
93 +</template>
94 +
95 +<script>
96 +// import { mapState } from 'vuex'
97 +import coord from '@/common/map_data'
98 +import map_max from '@/common/max'
99 +import map_alert from '@/common/alert'
100 +import _ from 'lodash';
101 +import $ from 'jquery';
102 +//引入定义的信息窗组件
103 +import InfoWindow from '@/components/InfoWindow'
104 +import InfoWindowLite from '@/components/InfoWindowLite'
105 +import InfoWindowWarn from '@/components/InfoWindowWarn'
106 +import audioBackground from '@/components/audioBackground'
107 +import { useRect } from '@vant/use';
108 +
109 +import { mapAPI } from '@/api/map.js'
110 +
111 +import wx from 'weixin-js-sdk'
112 +
113 +const GPS = {
114 + PI: 3.14159265358979324,
115 + x_pi: 3.14159265358979324 * 3000.0 / 180.0,
116 + delta: function (lat, lon) {
117 + var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
118 + var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
119 + var dLat = this.transformLat(lon - 105.0, lat - 35.0);
120 + var dLon = this.transformLon(lon - 105.0, lat - 35.0);
121 + var radLat = lat / 180.0 * this.PI;
122 + var magic = Math.sin(radLat);
123 + magic = 1 - ee * magic * magic;
124 + var sqrtMagic = Math.sqrt(magic);
125 + dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
126 + dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
127 + return {
128 + 'lat': dLat,
129 + 'lon': dLon
130 + };
131 + },
132 + //WGS-84 to GCJ-02
133 + gcj_encrypt: function (wgsLat, wgsLon) {
134 + if (this.outOfChina(wgsLat, wgsLon))
135 + return {
136 + 'lat': wgsLat,
137 + 'lon': wgsLon
138 + };
139 +
140 + var d = this.delta(wgsLat, wgsLon);
141 + return {
142 + 'lat': wgsLat + d.lat,
143 + 'lon': wgsLon + d.lon
144 + };
145 + },
146 + outOfChina: function (lat, lon) {
147 + if (lon < 72.004 || lon > 137.8347)
148 + return true;
149 + if (lat < 0.8293 || lat > 55.8271)
150 + return true;
151 + return false;
152 + },
153 + transformLat: function (x, y) {
154 + var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
155 + ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
156 + ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
157 + ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
158 + return ret;
159 + },
160 + transformLon: function (x, y) {
161 + var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
162 + ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
163 + ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
164 + ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
165 + return ret;
166 + }
167 +};
168 +
169 +export default {
170 + components: { InfoWindow },
171 + data() {
172 + return {
173 + map: '',
174 + location_options: {
175 + 'showButton': true, // 是否显示定位按钮
176 + 'buttonPosition': 'LB', // 定位按钮的位置
177 + /* LT LB RT RB */
178 + 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
179 + 'showMarker': true, // 是否显示定位点
180 + 'markerOptions': { // 自定义定位点样式，同Marker的Options
181 + 'offset': new AMap.Pixel(-18, -36),
182 + 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
183 + },
184 + 'showCircle': true, // 是否显示定位精度圈
185 + 'circleOptions': { // 定位精度圈的样式
186 + 'strokeColor': '#0093FF',
187 + 'noSelect': true,
188 + 'strokeOpacity': 0.5,
189 + 'strokeWeight': 1,
190 + 'fillColor': '#02B0FF',
191 + 'fillOpacity': 0.25
192 + },
193 + enableHighAccuracy: true
194 + },
195 + geolocation: '',
196 + current_lng: '',
197 + current_lat: '',
198 + current_route: '',
199 + current_safe_route: '',
200 + show_popup: false,
201 + dialog_show: false,
202 + dialog_text: '',
203 + walk_route: '',
204 + isActive: 0,
205 + route_marker: [],
206 + route_safe_marker: [],
207 + open_safe_route: true,
208 + show_walk_route: true,
209 + popup_title: '',
210 + popup_content: '',
211 + video_src: '',
212 + show_nav_popup: false,
213 + showInfoWindow: false,
214 + showInfoWindowLite: false,
215 + showInfoWindowWarn: false,
216 + infoWindow: {},
217 + infoWindowLite: {},
218 + infoWindowWarn: {},
219 + itemInfo: {},
220 + navBarList: [],
221 + rect: {},
222 + navList: [],
223 + navKey: '',
224 + markerSum: [], // marker合集
225 + titleLayerSet: {
226 + 17: {
227 + x: [109439, 109441],
228 + y: [53519, 53521]
229 + },
230 + 18: {
231 + x: [218879, 218882],
232 + y: [107039, 107042]
233 + }
234 + },
235 + defaultZoom: 18,
236 + defaultCenter: [120.587382, 31.313900],
237 + mapTiles: []
238 + }
239 + },
240 + async mounted() {
241 + const code = this.$route.query.id;
242 + // const code = '362800';
243 + const { data } = await mapAPI({i: code});
244 + data.list = data.list.concat(map_alert);
245 + this.navBarList = data.list; // 底部导航条
246 + this.mapTiles = data.level; // 获取图层
247 + this.navKey = data.list[0]['id']; // 默认选中 第一个 id
248 + this.navList = data.list.filter(item => item.id === this.navKey)[0]['list']; // 返回默认选中项的实体信息
249 + // 初始化地图
250 + this.initMap();
251 + // this.setMapBoundary();
252 + // 使用之前都要再获取一下地址
253 + this.getLocation()
254 + // 设置贴片地图
255 + this.setTitleLayer();
256 + // 每隔5分钟刷新地图
257 + setInterval(() => {
258 + this.map.resize();
259 + }, 1000 * 60 * 5);
260 + // wx.getLocation({
261 + // type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
262 + // success: function (res) {
263 + // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
264 + // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
265 + // var speed = res.speed; // 速度，以米/每秒计
266 + // var accuracy = res.accuracy; // 位置精度
267 + // console.warn(res);
268 + // }
269 + // });
270 + },
271 + watch: {
272 + show_popup(val) {
273 + if (!val) {
274 + this.$nextTick(() => {
275 + // 弹框关闭时，暂停视频
276 + $('.vjs-tech')[0].pause();
277 + $('.vjs-tech')[0].currentTime = 0;
278 + })
279 + }
280 + },
281 + showInfoWindow(val) {
282 + if (val) {
283 + // 元素的大小及其相对于视口的位置
284 + const rect = useRect(this.$refs.root);
285 + this.rect = rect;
286 + }
287 + },
288 + showInfoWindowLite(val) {
289 + if (val) {
290 + // 元素的大小及其相对于视口的位置
291 + const rect = useRect(this.$refs.root);
292 + this.rect = rect;
293 + }
294 + },
295 + showInfoWindowWarn(val) {
296 + if (val) {
297 + // 元素的大小及其相对于视口的位置
298 + const rect = useRect(this.$refs.root);
299 + this.rect = rect;
300 + }
301 + }
302 + },
303 + methods: {
304 + initMap() {
305 + // 初始化地图
306 + this.map = new AMap.Map('container', {
307 + viewMode: '2D', // 设置地图模式
308 + turboMode: false,
309 + showIndoorMap: false,
310 + defaultCursor: 'pointer', // 地图默认鼠标样式
311 + showBuildingBlock: false, // 是否展示地图 3D 楼块
312 + zooms: [17, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
313 + showLabel: true, // 是否展示地图文字和 POI 信息
314 + zoom: 18, // 设置地图显示的缩放级别
315 + pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
316 + rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
317 + center: [120.587382, 31.313900], // 设置地图中心点坐标
318 + forceVector: false,
319 + // rotateEnable: true,
320 + layers: [
321 + // new AMap.TileLayer.RoadNet(),
322 + ],
323 + features: ['bg', 'road'], // 设置地图上显示的元素种类
324 + animateEnable: false, // 地图平移过程中是否使用动画
325 + resizeEnable: true,
326 + });
327 + // 添加地图点击事件
328 + this.map.on("click", this.showInfoClick);
329 + // 加载景点图层
330 + this.loadMaker(this.navKey);
331 + //
332 + this.map.setRotation(6, true);
333 + },
334 + setNavLayer({ id }, index) { // 选择地图图层显示
335 + this.isActive = index;
336 + this.navList = this.navBarList.filter(item => item.id === id)[0]['list']; // 返回默认选中项的实体信息
337 + this.removeLayer();
338 + this.loadMaker(id);
339 + this.closeInfoWindow();
340 + setTimeout(() => {
341 + // 地图zooms调整
342 + this.map.setZoom(this.defaultZoom);
343 + this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
344 + }, 100);
345 + this.removeNavRoute();
346 + },
347 + loadMaker (id) {
348 + var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
349 + const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
350 + this.markerSum = [];
351 + _.each(entity_info, (x, i) => {
352 + let marker_icon = '';
353 + if (entity_info[i].window_type === 'warn' && entity_info[i].details.length === 1) { // 如果是预警类型并且内部预警项目只有一个取details第一个icon
354 + marker_icon = entity_info[i].details[0]['icon'];
355 + } else {
356 + marker_icon = entity_info[i].icon;
357 + }
358 + var marker = new AMap.ElasticMarker({
359 + position: entity_info[i].position,
360 + zooms: [17, 20],
361 + styles: [{
362 + icon: {
363 + img: marker_icon, // 标记点图标
364 + size: [28, 28], // 可见区域的大小
365 + anchor: 'bottom-center', // 锚点
366 + fitZoom: 14, // 最合适的级别
367 + scaleFactor: 2, // 地图放大一级的缩放比例系数
368 + maxScale: 1.4, // 最大放大比例
369 + minScale: 0.8 // 最小放大比例
370 + },
371 + label: {
372 + content: entity_info[i].name,
373 + position: 'TM',
374 + // position: 'BM',
375 + // offset: new AMap.Pixel(0, 10),
376 + minZoom: 18
377 + }
378 + }, {
379 + icon: {},
380 + label: {}
381 + }],
382 + zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
383 + });
384 + if (clickListener) {
385 + marker.off('click', clickListener)
386 + }
387 + // 绑定景点的点击事件 - 文字出现才能触发
388 + var clickListener = marker.on('click', (e) => {
389 + // 不同弹框类型
390 + if (entity_info[i].window_type === 'normal') {
391 + this.positionMarker(entity_info[i])
392 + } else if(entity_info[i].window_type === 'lite') {
393 + this.positionLiteMarker(entity_info[i])
394 + } else if (entity_info[i].window_type === 'warn') {
395 + this.positionWarnMarker(entity_info[i])
396 + }
397 + })
398 + // marker合集
399 + this.markerSum.push(marker);
400 + })
401 + this.map.add(this.markerSum);
402 + },
403 + removeLayer () {
404 + this.map.remove(this.markerSum);
405 + },
406 + // setMapBoundary() { // 地图描边
407 + // new AMap.Polygon({
408 + // cursor: 'pointer',
409 + // bubble: true,
410 + // path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
411 + // map: this.map,
412 + // fillOpacity: 0.5,
413 + // strokeWeight: 1,
414 + // fillColor: '#CFE7AA'
415 + // });
416 + // },
417 + // isPointInRing() { // 是否在景区范围
418 + // let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
419 + // [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
420 + // ]);
421 + // return isPointInRing
422 + // },
423 + // setLocation() { // 开启定位服务
424 + // // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
425 + // if (!this.current_lng || !this.current_lat) {
426 + // this.getLocation()
427 + // } else {
428 + // // 使用纠正偏移后的地址，打一个定位标记
429 + // var marker = new AMap.Marker({
430 + // position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
431 + // });
432 + // this.map.add(marker);
433 + // // 定位到地图中心-西园寺
434 + // this.map.setCenter([120.587334, 31.314823]);
435 + // // 判断是否在范围内
436 + // if (!this.isPointInRing()) {
437 + // this.dialog_show = true;
438 + // this.dialog_text = '您不在景区范围内';
439 + // }
440 + // }
441 + // },
442 + getLocation() { // 获取经纬度
443 + AMap.plugin(['AMap.Geolocation'], () => {
444 + this.geolocation = new AMap.Geolocation(this.location_options);
445 + this.geolocation.getCurrentPosition((status, result) => {
446 + if (status === 'complete') {
447 + let lat = result.position.lat;
448 + let lng = result.position.lng;
449 + // 行动路线
450 + if (lng && lat) {
451 + // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
452 + // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
453 + this.current_lng = lng;
454 + this.current_lat = lat;
455 + }
456 + } else {
457 + console.warn('获取失败');
458 + }
459 + })
460 + });
461 + },
462 + setZoom(type) { // 设置放大缩小地图
463 + const zoom = this.map.getZoom();
464 + if (type === 'plus') {
465 + this.map.setZoom(zoom + 1)
466 + }
467 + if (type === 'minus') {
468 + this.map.setZoom(zoom - 1)
469 + }
470 + },
471 + addSafeRoute() { // 新增路径
472 + // 行动路线
473 + var path = [
474 + [120.587645, 31.314833],
475 + [120.587709, 31.314338],
476 + [120.588211, 31.314377],
477 + ];
478 + // 生成折线地图路径
479 + this.current_safe_route = new AMap.Polyline({
480 + path,
481 + isOutline: true,
482 + outlineColor: '#fba601',
483 + borderWeight: 1,
484 + strokeColor: '#fba601',
485 + strokeOpacity: 1,
486 + strokeWeight: 3,
487 + // 折线样式还支持 'dashed'
488 + strokeStyle: 'solid',
489 + // strokeStyle是dashed时有效
490 + strokeDasharray: [10, 5],
491 + lineJoin: 'round',
492 + lineCap: 'round',
493 + zIndex: 50
494 + })
495 + this.map.add([this.current_safe_route]);
496 + // 设置起始点标记
497 + var marker1 = new AMap.Marker({
498 + icon: new AMap.Icon({
499 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
500 + size: new AMap.Size(40, 40),
501 + // 图标所用图片大小
502 + imageSize: new AMap.Size(40, 40),
503 + // 图标取图偏移量
504 + imageOffset: new AMap.Pixel(0, 0)
505 + }),
506 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
507 + anchor: 'bottom-center',
508 + offset: new AMap.Pixel(0, 0)
509 + });
510 + marker1.setLabel({
511 + direction: 'right',
512 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
513 + content: "<div class='info'>起点</div>", //设置文本标注内容
514 + });
515 + var marker2 = new AMap.Marker({
516 + icon: new AMap.Icon({
517 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
518 + size: new AMap.Size(40, 40),
519 + // 图标所用图片大小
520 + imageSize: new AMap.Size(40, 40),
521 + // 图标取图偏移量
522 + imageOffset: new AMap.Pixel(0, 0)
523 + }),
524 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
525 + anchor: 'bottom-center',
526 + offset: new AMap.Pixel(0, 0)
527 + });
528 + marker2.setLabel({
529 + direction: 'right',
530 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
531 + content: "<div class='info'>终点</div>", //设置文本标注内容
532 + });
533 + // 新增逃生路线标记
534 + this.route_safe_marker = [marker1, marker2]
535 + this.map.add(this.route_safe_marker);
536 + },
537 + removeSafeRoute() { // 移除地图路线
538 + this.map.remove([this.current_safe_route]); // 删除地图折线
539 + this.map.remove(this.route_safe_marker); // 删除起始点标记
540 + },
541 + addNavRoute (path) { // 新增导航路径
542 + // 生成折线地图路径
543 + this.current_route = new AMap.Polyline({
544 + path,
545 + isOutline: true,
546 + outlineColor: '#42a5f5',
547 + borderWeight: 1,
548 + strokeColor: '#42a5f5',
549 + strokeOpacity: 1,
550 + strokeWeight: 2,
551 + // 折线样式还支持 'dashed'
552 + strokeStyle: 'dashed',
553 + // strokeStyle是dashed时有效
554 + strokeDasharray: [10, 5],
555 + lineJoin: 'round',
556 + lineCap: 'round',
557 + zIndex: 50
558 + })
559 + this.map.add([this.current_route]);
560 + // 设置起始点标记
561 + var marker1 = new AMap.Marker({
562 + icon: new AMap.Icon({
563 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
564 + size: new AMap.Size(40, 40),
565 + // 图标所用图片大小
566 + imageSize: new AMap.Size(40, 40),
567 + // 图标取图偏移量
568 + imageOffset: new AMap.Pixel(0, 0)
569 + }),
570 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
571 + anchor: 'bottom-center',
572 + offset: new AMap.Pixel(0, 0)
573 + });
574 + marker1.setLabel({
575 + direction: 'right',
576 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
577 + content: "<div class='info'>终点</div>", //设置文本标注内容
578 + });
579 + var marker2 = new AMap.Marker({
580 + icon: new AMap.Icon({
581 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
582 + size: new AMap.Size(40, 40),
583 + // 图标所用图片大小
584 + imageSize: new AMap.Size(40, 40),
585 + // 图标取图偏移量
586 + imageOffset: new AMap.Pixel(0, 0)
587 + }),
588 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
589 + anchor: 'bottom-center',
590 + offset: new AMap.Pixel(0, 0)
591 + });
592 + marker2.setLabel({
593 + direction: 'right',
594 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
595 + content: "<div class='info'>起点</div>", //设置文本标注内容
596 + });
597 + // 新增逃生路线标记
598 + this.route_marker = [marker1, marker2]
599 + this.map.add(this.route_marker);
600 + // 关闭导航提示
601 + this.show_walk_route = false;
602 + },
603 + removeNavRoute() { // 移除地图路线
604 + this.map.remove([this.current_route]); // 删除地图折线
605 + this.map.remove(this.route_marker); // 删除起始点标记
606 + // 关闭导航提示
607 + this.show_walk_route = true;
608 + },
609 + computedMapSource(x, y, z) { // 根据图层信息生成图层实际地址
610 + for (const id in this.mapTiles) {
611 + if (z == id) {
612 + const scope = this.mapTiles[id];
613 + return scope[`${x}-${y}`]
614 + }
615 + }
616 + },
617 + setTitleLayer() { // 生成瓦片图
618 + const _this = this;
619 + var layer = new AMap.TileLayer.Flexible({
620 + cacheSize: 50,
621 + opacity: 1,
622 + zIndex: 100,
623 + createTile: function (x, y, z, success, fail) {
624 + // 控制地图等级显示图片范围-过滤不显示的图层渲染
625 + for (const id in _this.titleLayerSet) {
626 + if (z == id) {
627 + const scope = _this.titleLayerSet[id];
628 + if (x < scope.x[0] || x > scope.x[1]) {
629 + fail()
630 + return;
631 + }
632 + if (y < scope.y[0] || y > scope.y[1]) {
633 + fail()
634 + return;
635 + }
636 + }
637 + }
638 +
639 + var img = document.createElement('img');
640 + img.onload = function () {
641 + success(img)
642 + };
643 + img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
644 + img.onerror = function () {
645 + fail()
646 + };
647 +
648 + // img.src = `images/tiles/${z}/${x}_${y}.png`;
649 + img.src = _this.computedMapSource(x, y, z);
650 + },
651 + });
652 +
653 + this.map.addLayer(layer);
654 +
655 + // Canvas作为切片
656 + var layer1 = new AMap.TileLayer.Flexible({
657 + // tileSize: 128,
658 + cacheSize: 300,
659 + zIndex: 200,
660 + createTile: function (x, y, z, success, fail) {
661 + var c = document.createElement('canvas');
662 + c.width = c.height = 256;
663 +
664 + var cxt = c.getContext("2d");
665 + cxt.font = "15px Verdana";
666 + cxt.fillStyle = "#ff0000";
667 + cxt.strokeStyle = "#FF0000";
668 + cxt.strokeRect(0, 0, 256, 256);
669 + cxt.fillText('(' + [x, y, z].join(',') + ')', 10, 30);
670 +
671 + // 通知API切片创建完成
672 + success(c);
673 + }
674 + });
675 +
676 + // layer1.setMap(this.map);
677 +
678 + // 只显示相应区域，移动会回到选定范围
679 + // this.lockMapBounds()
680 +
681 + },
682 + // 限制地图范围
683 + // lockMapBounds() {
684 + // // var bounds = this.map.getBounds();
685 + // var myBounds = new AMap.Bounds(
686 + // [120.583246, 31.31645],
687 + // [120.589973, 31.311949]
688 + // );
689 +
690 + // this.map.setLimitBounds(myBounds);
691 + // },
692 + showInfoClick(e) {
693 + // console.log(e);
694 + var zoom = this.map.getZoom(); //获取当前地图级别
695 + var text =
696 + "您在 [" +
697 + e.lnglat.getLng() +
698 + "," +
699 + e.lnglat.getLat() +
700 + "] 的位置单击了地图！当前层级" +
701 + zoom;
702 + console.log(text);
703 + // 点击空白处 关闭弹框
704 + this.closeInfoWindow();
705 + // 关闭弹出底部导航弹框
706 + this.show_nav_popup = false;
707 + },
708 + // setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
709 + // //步行导航
710 + // let walking_CallBack = (result) => {
711 + // if (result.type === 'complete') {
712 + // console.warn(result);
713 + // console.warn('绘制步行路线完成');
714 + // } else {
715 + // console.error('步行路线数据查询失败' + result);
716 + // }
717 + // }
718 + // AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
719 + // this.walk_route = new AMap.Walking({
720 + // map: this.map,
721 + // }); //构造步行导航类
722 + // AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
723 + // //根据起、终点坐标规划步行路线
724 + // this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
725 + // });
726 + // this.show_walk_route = false;
727 + // },
728 + // removeWalkRoute() {
729 + // this.walk_route.clear();
730 + // this.show_walk_route = true;
731 + // },
732 + infoWindowLocation(path) { // 监听前往按钮回调
733 + // TODO: 实际获取精确定位后导航到位置
734 + // // 判断是否在范围内
735 + // if (!this.isPointInRing()) {
736 + // this.dialog_show = true;
737 + // } else {
738 + // this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
739 + // }
740 + // if (this.walk_route) { // 清除前一条步行导航
741 + // this.walk_route.clear();
742 + // }
743 + // 测试
744 + this.closeInfoWindow(); // 关闭弹框
745 + // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
746 + if (this.current_route) { // 清除前一条步行导航
747 + this.map.remove([this.current_route]); // 删除地图折线
748 + this.map.remove(this.route_marker); // 删除起始点标记
749 + }
750 + if (path.length) {
751 + this.addNavRoute(path)
752 + } else {
753 + this.dialog_show = true;
754 + this.dialog_text = '内部设施';
755 + }
756 + },
757 + handleSafeRoute(status) { // 打开/关闭逃生路线线
758 + if (status) {
759 + this.addSafeRoute()
760 + this.open_safe_route = false;
761 + } else {
762 + this.removeSafeRoute()
763 + this.open_safe_route = true;
764 + }
765 + },
766 + handleNavPopup() {
767 + this.show_nav_popup = !this.show_nav_popup
768 + },
769 + handleNavMarker (item) { // 底部列表点击跳转弹框判断
770 + if (item.window_type === 'normal') {
771 + this.positionMarker(item)
772 + } else if (item.window_type === 'lite') {
773 + this.positionLiteMarker(item)
774 + } else if (item.window_type === 'warn') {
775 + this.positionWarnMarker(item)
776 + }
777 + },
778 + positionMarker(item) {
779 + // 点击后创建自定义信息窗口
780 + this.setInfoWindows(item)
781 + // 把地图中心点设置为当前点击的标记点
782 + this.map.setZoomAndCenter(this.zoom, item.position);
783 + //
784 + this.show_nav_popup = false;
785 + // 禁止缩放
786 + this.map.setStatus({
787 + zoomEnable: false
788 + });
789 + },
790 + positionLiteMarker(item) {
791 + // 点击后创建自定义信息窗口
792 + this.setInfoWindowsLite(item)
793 + // 把地图中心点设置为当前点击的标记点
794 + this.map.setZoomAndCenter(this.zoom, item.position);
795 + //
796 + this.show_nav_popup = false;
797 + // 禁止缩放
798 + this.map.setStatus({
799 + zoomEnable: false
800 + });
801 + },
802 + positionWarnMarker(item) {
803 + // 点击后创建自定义信息窗口
804 + this.setInfoWindowsWarn(item)
805 + // 把地图中心点设置为当前点击的标记点
806 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
807 + //
808 + this.show_nav_popup = false;
809 + // 禁止缩放
810 + this.map.setStatus({
811 + zoomEnable: false
812 + });
813 + },
814 + setInfoWindows(item) {
815 + // 此时需要把组件的样式设置为可见
816 + this.showInfoWindow = true
817 + // 设置marker头部的标题信息窗口
818 + const infoWindow = new AMap.InfoWindow({
819 + // 使用自定义窗体
820 + isCustom: true,
821 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
822 + content: this.$refs['infoWindow'].$el,
823 + // 设置定位偏移量
824 + offset: new AMap.Pixel(0, -30),
825 + })
826 + this.infoWindow = infoWindow;
827 + this.itemInfo = item;
828 + this.itemInfo.map = this.map;
829 + this.itemInfo.LngLat = {
830 + lng: this.current_lng,
831 + lat: this.current_lat,
832 + }
833 + // 信息窗口打开
834 + infoWindow.open(this.map, item.position)
835 + },
836 + setInfoWindowsLite(item) {
837 + // 此时需要把组件的样式设置为可见
838 + this.showInfoWindowLite = true
839 + // 设置marker头部的标题信息窗口
840 + const infoWindowLite = new AMap.InfoWindow({
841 + // 使用自定义窗体
842 + isCustom: true,
843 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
844 + content: this.$refs['infoWindowLite'].$el,
845 + // 设置定位偏移量
846 + offset: new AMap.Pixel(0, -30),
847 + })
848 + this.infoWindowLite = infoWindowLite;
849 + this.itemInfo = item;
850 + this.itemInfo.map = this.map;
851 + this.itemInfo.LngLat = {
852 + lng: this.current_lng,
853 + lat: this.current_lat,
854 + }
855 + // 信息窗口打开
856 + infoWindowLite.open(this.map, item.position)
857 + },
858 + setInfoWindowsWarn(item) {
859 + // 此时需要把组件的样式设置为可见
860 + this.showInfoWindowWarn = true
861 + // 设置marker头部的标题信息窗口
862 + const infoWindowWarn = new AMap.InfoWindow({
863 + // 使用自定义窗体
864 + isCustom: true,
865 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
866 + content: this.$refs['infoWindowWarn'].$el,
867 + // 设置定位偏移量
868 + offset: new AMap.Pixel(0, -30),
869 + })
870 + this.infoWindowWarn = infoWindowWarn;
871 + this.itemInfo = item;
872 + this.itemInfo.map = this.map;
873 + this.itemInfo.LngLat = {
874 + lng: this.current_lng,
875 + lat: this.current_lat,
876 + }
877 + // 信息窗口打开
878 + infoWindowWarn.open(this.map, item.position);
879 + },
880 + closeInfoWindow() {
881 + if (this.showInfoWindow) {
882 + this.$refs['infoWindow'].close();
883 + // 打开缩放
884 + this.map.setStatus({
885 + zoomEnable: true
886 + });
887 + }
888 + if (this.showInfoWindowLite) {
889 + this.$refs['infoWindowLite'].close();
890 + // 打开缩放
891 + this.map.setStatus({
892 + zoomEnable: true
893 + });
894 + }
895 + if (this.showInfoWindowWarn) {
896 + this.$refs['infoWindowWarn'].close();
897 + // 打开缩放
898 + this.map.setStatus({
899 + zoomEnable: true
900 + });
901 + }
902 + },
903 + onPlay (name) {
904 + // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
905 + // _.each(coord.spotInfo, (x, i) => {
906 + // var marker = new AMap.ElasticMarker({
907 + // position: coord.spotInfo[i].position,
908 + // zooms: [17, 19],
909 + // styles: [{
910 + // icon: {
911 + // img: x.name !== name ?coord.spotInfo[i].icon : 'https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png',
912 + // size: [28, 28], // 可见区域的大小
913 + // anchor: 'bottom-center', // 锚点
914 + // fitZoom: 14, // 最合适的级别
915 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
916 + // maxScale: 1.4, // 最大放大比例
917 + // minScale: 0.8 // 最小放大比例
918 + // },
919 + // label: {
920 + // content: coord.spotInfo[i].name,
921 + // position: 'TM',
922 + // // position: 'BM',
923 + // // offset: new AMap.Pixel(0, 10),
924 + // minZoom: 18
925 + // }
926 + // }, {
927 + // icon: {},
928 + // label: {}
929 + // }],
930 + // zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
931 + // });
932 + // if (clickListener) {
933 + // marker.off('click', clickListener)
934 + // }
935 + // // 绑定景点的点击事件 - 文字出现才能触发
936 + // var clickListener = marker.on('click', (e) => {
937 + // this.positionMarker(coord.spotInfo[i]);
938 + // })
939 +
940 + // this.spotInfo.push(marker);
941 + // })
942 + // this.map.add(this.spotInfo);
943 + },
944 + onPause (name) {},
945 + selectRoute () { // 选择最近路线
946 + // 获取实际定位
947 + // const currentLngLat = [this.current_lng, this.current_lat];
948 + // console.warn(currentLngLat);
949 + const lngLat = [120.587234, 31.314147]; // 左边
950 + // const lngLat = [120.588178, 31.314396]; // 右边
951 + // 构建路线结构
952 + const route_obj = [{
953 + route: [[120.587728, 31.313561], [120.587479, 31.313545], [120.587449, 31.313643], [120.587436, 31.313763], [120.587417, 31.313884], [120.587398, 31.314015], [120.587382, 31.314175], [120.587371, 31.314292], [120.587703, 31.314378]],
954 + distance: '',
955 + }, {
956 + route: [[120.587832, 31.313471], [120.588062, 31.313498], [120.588218, 31.313551], [120.588213, 31.313721], [120.588172, 31.31403], [120.588164, 31.314245], [120.588103, 31.314392], [120.587875, 31.314381], [120.587703, 31.314378]],
957 + distance: '',
958 + }];
959 + // 计算距离最近的路径
960 + route_obj.forEach((line) => {
961 + line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.route);
962 + });
963 + let min = Math.min(...route_obj.map((line) => line.distance))
964 + let result = route_obj.filter((line) => line.distance === min);
965 + // 标记示例
966 + const current_route = new AMap.Polyline({
967 + path: result[0]['route'],
968 + isOutline: true,
969 + outlineColor: '#42a5f5',
970 + borderWeight: 1,
971 + strokeColor: '#42a5f5',
972 + strokeOpacity: 1,
973 + strokeWeight: 2,
974 + // 折线样式还支持 'dashed'
975 + strokeStyle: 'dashed',
976 + // strokeStyle是dashed时有效
977 + strokeDasharray: [10, 5],
978 + lineJoin: 'round',
979 + lineCap: 'round',
980 + zIndex: 50
981 + })
982 + this.map.add([current_route]);
983 + var marker = new AMap.Marker({
984 + icon: new AMap.Icon({
985 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
986 + size: new AMap.Size(40, 40),
987 + // 图标所用图片大小
988 + imageSize: new AMap.Size(40, 40),
989 + // 图标取图偏移量
990 + imageOffset: new AMap.Pixel(0, 0)
991 + }),
992 + position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
993 + anchor: 'bottom-center',
994 + offset: new AMap.Pixel(0, 0)
995 + });
996 + this.map.add([marker]);
997 + },
998 + }
999 +}
1000 +</script>
1001 +
1002 +<style lang="less">
1003 +#container {
1004 + position: absolute;
1005 + top: 0;
1006 + left: 0;
1007 + right: 0;
1008 + bottom: 0;
1009 + width: 100%;
1010 + height: 100%;
1011 +}
1012 +
1013 +/* 标记文字样式 */
1014 +.amap-marker-label {
1015 + padding: 0.25rem 0.5rem;
1016 + width: auto;
1017 + border: none;
1018 + border-radius: 2px;
1019 + background: rgba(86, 65, 23, 0.8);
1020 + color: white;
1021 +}
1022 +
1023 +.amap-marker {
1024 + .amap-icon {
1025 + margin-top: 0.25rem;
1026 + }
1027 +}
1028 +
1029 +.input-card {
1030 + display: flex;
1031 + flex-direction: column;
1032 + min-width: 0;
1033 + word-wrap: break-word;
1034 + background-color: #fff;
1035 + background-clip: border-box;
1036 + border-radius: .25rem;
1037 + width: 20rem;
1038 + border-width: 0;
1039 + border-radius: 0.4rem;
1040 + box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
1041 + position: fixed;
1042 + top: 4rem;
1043 + right: 1rem;
1044 + -ms-flex: 1 1 auto;
1045 + flex: 1 1 auto;
1046 + padding: 0.75rem 1.25rem;
1047 +}
1048 +
1049 +.tool-bar-wrapper {
1050 + position: absolute;
1051 + left: 20px;
1052 + bottom: 8rem;
1053 + width: 20px;
1054 +}
1055 +
1056 +.nav-bar-wrapper {
1057 + position: fixed;
1058 + bottom: 0;
1059 + left: 0;
1060 + height: 5.5rem;
1061 + width: 100%;
1062 + background-color: white;
1063 + text-align: center;
1064 + box-shadow: 0 -1px 0 rgba(80, 80, 80, 0.1);
1065 + z-index: 999;
1066 + // padding: 0.5rem 0;
1067 + padding-bottom: 0.5rem;
1068 +
1069 + .nav-bar-content {
1070 + display: flex;
1071 + overflow-x: scroll;
1072 + overflow-y: hidden;
1073 + -webkit-overflow-scrolling: touch;
1074 + position: relative;
1075 + }
1076 +
1077 + .item {
1078 + padding-top: 0.5rem;
1079 + color: #888;
1080 + width: 21.5%;
1081 + flex-shrink: 0;
1082 + padding-top: 1rem;
1083 + }
1084 +
1085 + .checked {
1086 + color: #965f13;
1087 + }
1088 +}
1089 +
1090 +.safe-route-wrapper {
1091 + position: absolute;
1092 + bottom: 2rem;
1093 + right: 1rem;
1094 + background-color: white;
1095 +}
1096 +
1097 +.operate-bar-wrapper {
1098 + position: fixed;
1099 + left: 20px;
1100 + bottom: 6rem;
1101 + width: 20px;
1102 + height: auto;
1103 + z-index: 100;
1104 +
1105 + .box-wrapper {
1106 + display: flex;
1107 + flex-direction: column;
1108 + align-items: center;
1109 + justify-content: center;
1110 +
1111 + .item {
1112 + text-align: center;
1113 + font-size: 0.85rem;
1114 + width: 2rem;
1115 + height: 2rem;
1116 + background-color: white;
1117 + margin-bottom: 1rem;
1118 + border-radius: 50%;
1119 + padding: 2.5px;
1120 + line-height: 2rem;
1121 + }
1122 + }
1123 +}
1124 +
1125 +.popup-wrapper {
1126 + margin-top: 1rem;
1127 +
1128 + .title {
1129 + font-size: 1.25rem;
1130 + margin-bottom: 0.85rem;
1131 + }
1132 +
1133 + .content {
1134 + line-height: 1.75;
1135 + font-size: 0.95rem;
1136 + }
1137 +}
1138 +
1139 +
1140 +.hideScrollBar::-webkit-scrollbar {
1141 + display: none;
1142 +}
1143 +
1144 +.hideScrollBar {
1145 + -ms-overflow-style: none;
1146 + overflow: -moz-scrollbars-none;
1147 +}
1148 +
1149 +.van-dialog__confirm,
1150 +.van-dialog__confirm:active {
1151 + color: #AB8F57;
1152 +}
1153 +
1154 +.walk-nav-text {
1155 + position: fixed;
1156 + bottom: 6rem;
1157 + left: 50%;
1158 + transform: translate(-50%, -50%);
1159 + z-index: 999;
1160 + background: rgba(86, 65, 23, 0.8);
1161 + color: white;
1162 + border-radius: 10px;
1163 + padding: 5px 12px;
1164 + font-size: 0.8rem;
1165 +}
1166 +</style>
1167 +@/common/map_data