Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e7a76f9 1 parent 68a9188f

垂直标题点击弹框样式调整

Expand all
Inline Side-by-side
Showing 5 changed files with 331 additions and 4 deletions
...@@ -10,7 +10,11 @@ export {} ...@@ -10,7 +10,11 @@ export {}
10 declare module '@vue/runtime-core' { 10 declare module '@vue/runtime-core' {
11 export interface GlobalComponents { 11 export interface GlobalComponents {
12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default'] 12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
13 + copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
13 Floor: typeof import('./src/components/Floor/index.vue')['default'] 14 Floor: typeof import('./src/components/Floor/index.vue')['default']
15 + InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
16 + InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']
17 + InfoPopupWarn: typeof import('./src/components/InfoPopupWarn.vue')['default']
14 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default'] 18 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
15 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default'] 19 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
16 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default'] 20 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
......
This diff is collapsed. Click to expand it.
1 +<template>
2 + <div style="position: relative;">
3 + <!-- <div class="info-window-lite-wrapper">
4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 + <div class="hideScrollBar info-window-title">
6 + <div class="checked">
7 + <span>{{ info.name }}</span>
8 + </div>
9 + </div>
10 + <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
11 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
12 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
13 + </div>
14 + </div>
15 + <div class="van-hairline--top" style="margin: 1rem 0;">
16 + <div @click="goToLocation()" style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
17 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
18 + style="vertical-align: bottom;" />&nbsp;
19 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
20 + </div>
21 + </div>
22 + </div>
23 + <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
24 + <div class="leaflet-popup-tip"></div>
25 + </div> -->
26 +
27 + <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :close-on-click-overlay="false"
28 + :style="{ padding: '1rem', height: '50%' }">
29 + <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
30 + <div class="popup-wrapper">
31 + <div class="info-window-lite-wrapper1">
32 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
33 + <div class="hideScrollBar info-window-title">
34 + <div class="checked">
35 + <span>{{ info.name }}</span>
36 + </div>
37 + </div>
38 + <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
39 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
40 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
41 + </div>
42 + </div>
43 + <div class="van-hairline--top" style="margin: 1rem 0;">
44 + <div @click="goToLocation()" style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
45 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
46 + style="vertical-align: bottom;" />&nbsp;
47 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
48 + </div>
49 + </div>
50 + </div>
51 + </div>
52 + </van-popup>
53 + </div>
54 +</template>
55 +
56 +<script>
57 +import $ from 'jquery'
58 +
59 +export default {
60 + props: {
61 + infoWindow: {
62 + type: Object,
63 + default: () => { }
64 + },
65 + info: {
66 + type: Object,
67 + default: () => { }
68 + },
69 + rect: {
70 + type: Object,
71 + default: () => { }
72 + },
73 + show: {
74 + type: Boolean,
75 + default: false
76 + }
77 + },
78 + mounted() {
79 + },
80 + watch: {
81 + show(val) {
82 + this.show_popup = val;
83 + },
84 + rect(val) {
85 + this.widow_info = val;
86 + },
87 + },
88 + data() {
89 + return {
90 + show_popup: false,
91 + popup_title: '',
92 + popup_content: '',
93 + video_src: '',
94 + ind: '',
95 + is_play: false,
96 + audio: new Audio(),
97 + widow_info: {},
98 + play_time: '00:00',
99 + isActive: 0,
100 + nav_scroll: false,
101 + }
102 + },
103 + methods: {
104 + // 关闭
105 + close() {
106 + // 高德地图信息窗关闭的api
107 + this.infoWindow.close()
108 + },
109 + showDetail() {
110 + this.show_popup = true;
111 + this.popup_title = '三宝楼';
112 + this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
113 + this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
114 + },
115 + goTo(url) {
116 + location.href = this.info.details[this.isActive].url;
117 + },
118 + goToLocation() {
119 + // this.$emit('onLocation', this.info.position)
120 + this.$emit('onLocation', this.info.position)
121 + },
122 + onClose () {
123 + this.$emit('onClose')
124 + }
125 + }
126 +}
127 +</script>
128 +
129 +<style lang="less">
130 +.info-window-lite-wrapper1 {
131 + background: #fff;
132 + color: #333;
133 + // -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
134 + // box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
135 + // text-align: left;
136 + // border-radius: 5px;
137 + // padding: 1rem 1.25rem;
138 + overflow: auto;
139 +
140 + .info-text {
141 + // width: 100%;
142 + line-height: 1.5;
143 + float: left;
144 + color: #7A6C6C;
145 + font-size: 0.9rem;
146 + margin-top: 0.5rem;
147 + }
148 + .info-text-audio {
149 + width: 80%;
150 + line-height: 1.5;
151 + float: left;
152 + color: #7A6C6C;
153 + }
154 +
155 + .info-control {
156 + width: 20%;
157 + float: left;
158 + text-align: center;
159 + color: #AB8F57;
160 +
161 + .control-play {
162 + text-align: center;
163 + margin-bottom: 0.5rem;
164 +
165 + i {
166 + margin-top: 0 !important;
167 + }
168 + }
169 + }
170 +
171 + // .t-popup-content {
172 + // position: relative;
173 + // width: 25rem;
174 + // padding: 0;
175 + // margin: 0;
176 + // border-radius: 0.1rem;
177 + // background: rgba(255, 255, 255, 0.9);
178 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
179 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
180 + // line-height: 1.4;
181 +
182 + // .view-name {
183 + // margin: 0;
184 + // padding: 0.5rem;
185 + // width: 25rem;
186 + // height: 2.5rem;
187 + // font-size: 1.2rem;
188 + // text-indent: 0.2rem;
189 + // white-space: nowrap;
190 + // text-overflow: ellipsis;
191 + // color: #5b5b5b;
192 + // -webkit-box-sizing: border-box;
193 + // box-sizing: border-box;
194 + // border-bottom: solid 1px #e8e8e8;
195 + // border-radius: 0.1rem 0.1rem 0 0;
196 + // background: #f7f7f7;
197 + // overflow: hidden;
198 + // }
199 +
200 + // .view-photo {
201 + // display: block;
202 + // float: left;
203 + // margin: 0.5rem;
204 + // height: 100%;
205 + // width: 9rem;
206 + // height: 9rem;
207 + // border-radius: 3px;
208 + // }
209 +
210 + // .introduction {
211 + // float: left;
212 + // margin: 0.2rem 0;
213 + // width: 13.5rem;
214 + // height: 6.75rem;
215 + // font-size: 0.9rem;
216 + // color: #202020;
217 + // overflow: hidden;
218 + // }
219 +
220 + // // .control-play {
221 + // // display: block;
222 + // // float: left;
223 + // // margin-right: 0.5rem;
224 + // // width: 7rem;
225 + // // height: 3rem;
226 + // // border-radius: 2px;
227 + // // background: #ffdd02 center no-repeat;
228 + // // background-size: 6.5rem 3rem;
229 + // // }
230 +
231 + // .show-details {
232 + // display: block;
233 + // float: left;
234 + // width: 7rem;
235 + // height: 3rem;
236 + // border-radius: 2px;
237 + // background: #9196a9 center no-repeat;
238 + // background-size: 6.5rem 3rem;
239 + // }
240 + // }
241 +
242 + .info-window-title {
243 + display: flex;
244 + overflow-x: scroll;
245 + overflow-y: hidden;
246 + -webkit-overflow-scrolling: touch;
247 + position: relative;
248 + text-align: left;
249 +
250 + .item {
251 + width: 33.333%;
252 + flex-shrink: 0;
253 + color: #888;
254 + font-size: 1.1rem;
255 + margin-bottom: 0.75rem;
256 + display: inline-block;
257 + }
258 +
259 + .checked {
260 + color: #AB8F57;
261 + span {
262 + border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
263 + }
264 + }
265 + }
266 +}
267 +
268 +.leaflet-popup-tip-container {
269 + margin-top: -1px;
270 + width: 2rem;
271 + height: 2rem;
272 + margin-left: -10px;
273 + overflow: hidden;
274 + pointer-events: none;
275 +}
276 +
277 +.leaflet-popup-tip {
278 + width: 1rem;
279 + height: 1rem;
280 + -webkit-transform: rotate(0);
281 + transform: rotate(0);
282 + background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
283 + background-size: 1rem 1rem;
284 + box-shadow: none;
285 +}
286 +
287 +</style>
This diff is collapsed. Click to expand it.
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-10 17:37:37 4 + * @LastEditTime: 2024-09-11 18:17:44
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
70 关闭步行导航 70 关闭步行导航
71 </div> 71 </div>
72 72
73 - <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }"> 73 + <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" teleport="body" :close-on-click-overlay="false" :style="{ padding: '1rem', height: '50%' }">
74 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" /> 74 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
75 <div class="popup-wrapper"> 75 <div class="popup-wrapper">
76 <div class="title"> 76 <div class="title">
...@@ -97,6 +97,11 @@ ...@@ -97,6 +97,11 @@
97 :rect="rect"></InfoWindowWarn> 97 :rect="rect"></InfoWindowWarn>
98 98
99 <audioBackground></audioBackground> 99 <audioBackground></audioBackground>
100 +
101 + <InfoPopup :show="showInfoPopup" :info-window="infoWindow" :info="itemInfo"
102 + @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause" @onClose="onClose"></InfoPopup>
103 + <InfoPopupLite :show="showInfoLitePopup" :info="itemInfo" @onClose="onLiteClose"></InfoPopupLite>
104 + <InfoPopupWarn :show="showInfoWarnPopup" :info="itemInfo" @onClose="onWarnClose"></InfoPopupWarn>
100 </div> 105 </div>
101 </template> 106 </template>
102 107
...@@ -116,6 +121,9 @@ import audioBackground from '@/components/audioBackground' ...@@ -116,6 +121,9 @@ import audioBackground from '@/components/audioBackground'
116 import { useRect } from '@vant/use'; 121 import { useRect } from '@vant/use';
117 import { mapAPI } from '@/api/map.js' 122 import { mapAPI } from '@/api/map.js'
118 import wx from 'weixin-js-sdk' 123 import wx from 'weixin-js-sdk'
124 +import InfoPopup from '@/components/InfoPopup'
125 +import InfoPopupLite from '@/components/InfoPopupLite'
126 +import InfoPopupWarn from '@/components/InfoPopupWarn'
119 127
120 const GPS = { 128 const GPS = {
121 PI: 3.14159265358979324, 129 PI: 3.14159265358979324,
...@@ -174,7 +182,7 @@ const GPS = { ...@@ -174,7 +182,7 @@ const GPS = {
174 }; 182 };
175 183
176 export default { 184 export default {
177 - components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground }, 185 + components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground, InfoPopup, InfoPopupLite, InfoPopupWarn },
178 data() { 186 data() {
179 return { 187 return {
180 map: '', 188 map: '',
...@@ -204,7 +212,7 @@ export default { ...@@ -204,7 +212,7 @@ export default {
204 current_lat: '', 212 current_lat: '',
205 current_route: '', 213 current_route: '',
206 current_safe_route: [], 214 current_safe_route: [],
207 - // show_popup: false, 215 + show_popup: false,
208 dialog_show: false, 216 dialog_show: false,
209 dialog_text: '', 217 dialog_text: '',
210 walk_route: '', 218 walk_route: '',
...@@ -250,6 +258,9 @@ export default { ...@@ -250,6 +258,9 @@ export default {
250 data_rotation: 0, // 接口获取-地图旋转角度 258 data_rotation: 0, // 接口获取-地图旋转角度
251 data_paths: {}, // 接口获取-地图导航路径 259 data_paths: {}, // 接口获取-地图导航路径
252 data_path_list: [], // 接口获取-地图导航路径 260 data_path_list: [], // 接口获取-地图导航路径
261 + showInfoPopup: false,
262 + showInfoLitePopup: false,
263 + showInfoWarnPopup: false,
253 } 264 }
254 }, 265 },
255 async mounted() { 266 async mounted() {
...@@ -449,6 +460,22 @@ export default { ...@@ -449,6 +460,22 @@ export default {
449 }, 460 },
450 position: entity_info[i].position, //点标记在地图上显示的位置 461 position: entity_info[i].position, //点标记在地图上显示的位置
451 }); 462 });
463 + if (clickListener) {
464 + textMarker.off('click', clickListener)
465 + }
466 + // 绑定景点的点击事件 - 文字出现才能触发
467 + var clickListener = textMarker.on('click', (e) => {
468 + console.warn(e);
469 + this.itemInfo = entity_info[i];
470 + // 不同弹框类型
471 + if (entity_info[i].window_type === 'normal') {
472 + this.showInfoPopup = true;
473 + } else if (entity_info[i].window_type === 'lite') {
474 + this.showInfoLitePopup = true;
475 + } else if (entity_info[i].window_type === 'warn') {
476 + this.showInfoWarnPopup = true;
477 + }
478 + })
452 textMarker.setMap(this.map); //将文本标记设置到地图上 479 textMarker.setMap(this.map); //将文本标记设置到地图上
453 } else { // 默认方向 480 } else { // 默认方向
454 // 创建一个 LabelMarker 实例 481 // 创建一个 LabelMarker 实例
...@@ -1277,6 +1304,15 @@ export default { ...@@ -1277,6 +1304,15 @@ export default {
1277 // this.map.add(this.spotInfo); 1304 // this.map.add(this.spotInfo);
1278 }, 1305 },
1279 onPause(name) { }, 1306 onPause(name) { },
1307 + onClose () {
1308 + this.showInfoPopup = false;
1309 + },
1310 + onLiteClose () {
1311 + this.showInfoLitePopup = false;
1312 + },
1313 + onWarnClose () {
1314 + this.showInfoWarnPopup = false;
1315 + },
1280 } 1316 }
1281 } 1317 }
1282 </script> 1318 </script>
......