Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
13ef6559 1 parent d11040b0

新增地图工具

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