Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-08-07 13:47:08 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
6aa569d0b660751c50001132318207513b078990
6aa569d0
1 parent
5f51a51b
点击pin时,详情显示的效果优化
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
119 additions
and
18 deletions
src/App.vue
src/components/Floor/floor.css
src/components/Floor/index.vue
src/components/Floor/pin.js
src/utils/tools.js
src/views/inner.vue
src/App.vue
View file @
6aa569d
...
...
@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-0
7-19 10:42:0
5
* @LastEditTime: 2023-0
8-07 13:32:2
5
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
...
...
src/components/Floor/floor.css
View file @
6aa569d
...
...
@@ -362,7 +362,7 @@ button:focus {
.level.level--current
{
-webkit-transform
:
translateZ
(
15vmin
)
rotate3d
(
0
,
0
,
1
,
20deg
);
/* go to center */
transform
:
translateZ
(
-3rem
)
rotate3d
(
0
,
0
,
1
,
20deg
);
transform
:
translateZ
(
12vmin
)
rotate3d
(
0
,
0
,
1
,
20deg
);
}
/* Navigation classes */
...
...
@@ -849,7 +849,7 @@ button:focus {
.pin--active
.icon--pin
{
stroke
:
#515158
;
stroke-width
:
15px
;
stroke-width
:
2vw
;
}
.icon--pin
{
...
...
src/components/Floor/index.vue
View file @
6aa569d
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-0
4 16:57:15
* @LastEditTime: 2023-08-0
7 13:46:36
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
...
...
@@ -98,6 +98,7 @@ import './floor.css';
import $ from 'jquery';
import SvgIcon from './svgIcon.vue'
import Data from './pin'
import { wxInfo } from '@/utils/tools'
export default {
data() {
...
...
@@ -155,11 +156,11 @@ export default {
clearPinShow() {
$('.level__pins').children('.pin').each((index, ele) => {
$(ele).removeClass('pin--active');
})
});
$('.mall').removeClass('mall--content-open');
},
onFloorClick(level) {
this.level_show = level;
$('.mall').addClass('mall--content-open');
$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
$(`.level--${level}`).addClass('level--current');
$(`.level--${level} .level__pins`).addClass('level__pins--active');
...
...
@@ -169,6 +170,7 @@ export default {
let level = this.level_show;
$('.mall').removeClass('mall--content-open');
$('.levels').removeClass('levels--open').removeClass(`levels--selected-${level}`);
$('.level.level--current').css('transform', '');
$(`.level--${level}`).removeClass('level--current');
$(`.level--${level} .level__pins`).removeClass('level__pins--active');
this.level_show = '';
...
...
@@ -202,8 +204,9 @@ export default {
// 测试锚点
let currentTarget = null;
let category = null;
let space = null;
$('.level__pins').children('.pin').each((index, ele) => {
let
space = $(ele).data('space'); // 锚点标记
space = $(ele).data('space'); // 锚点标记
if (space === val) { // 匹配符合的dom节点
category = parseInt(space);// 获取图层标记
currentTarget = ele;
...
...
@@ -217,6 +220,22 @@ export default {
setTimeout(() => {
// 打开锚点详情
this.show_popup = true;
// 把图层推高
$('.mall').addClass('mall--content-open');
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
this.level_list.forEach(item => {
item.pin.forEach(x => {
if (x.space === val) {
// 打开 pin 详情信息
this.popup_title = x?.affix?.title;
this.popup_content = x?.affix?.content;
}
})
});
}, 500);
// 关闭搜索弹框
this.show_search_popup = false;
...
...
@@ -227,11 +246,19 @@ export default {
},
clickPin (item, evt) { // 点击pin操作
this.clearPinShow();
$(evt.target).parents('a.pin').addClass('pin--active');
$(evt.target).parents('a.pin').addClass('pin--active'); // pin点击效果
//
this.show_popup = true;
// 打开 pin 详情信息
this.popup_title = item?.affix?.title;
this.popup_content = item?.affix?.content;
// 把图层推高
$('.mall').addClass('mall--content-open');
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
},
onSearchUpdate () {
this.search_list.forEach((item) => {
...
...
src/components/Floor/pin.js
View file @
6aa569d
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 1
6:06:07
* @LastEditTime: 2023-08-04 1
7:05:49
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
...
...
@@ -82,6 +82,10 @@ const testInfo = [
space
:
1.01
,
icon
:
'appleheart'
,
style
:
{
top
:
'60vmin'
,
left
:
'8vmin'
},
affix
:
{
title
:
'宿舍101'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-2'
,
...
...
@@ -89,6 +93,10 @@ const testInfo = [
space
:
1.02
,
icon
:
'bananas'
,
style
:
{
top
:
'15vmin'
,
left
:
'15vmin'
},
affix
:
{
title
:
'宿舍102'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-3'
,
...
...
@@ -96,6 +104,10 @@ const testInfo = [
space
:
1.03
,
icon
:
'origami'
,
style
:
{
top
:
'15vmin'
,
left
:
'88vmin'
},
affix
:
{
title
:
'宿舍103'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-4'
,
...
...
@@ -103,6 +115,10 @@ const testInfo = [
space
:
1.04
,
icon
:
'dress'
,
style
:
{
top
:
'40vmin'
,
left
:
'77vmin'
},
affix
:
{
title
:
'宿舍104'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-5'
,
...
...
@@ -110,6 +126,10 @@ const testInfo = [
space
:
1.05
,
icon
:
'tree2'
,
style
:
{
top
:
'33vmin'
,
left
:
'38vmin'
},
affix
:
{
title
:
'宿舍105'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-6'
,
...
...
@@ -117,6 +137,10 @@ const testInfo = [
space
:
1.06
,
icon
:
'avocado'
,
style
:
{
top
:
'6vmin'
,
left
:
'27vmin'
},
affix
:
{
title
:
'宿舍106'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-7'
,
...
...
@@ -124,6 +148,10 @@ const testInfo = [
space
:
1.07
,
icon
:
'cake'
,
style
:
{
top
:
'36vmin'
,
left
:
'61vmin'
},
affix
:
{
title
:
'宿舍107'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-8'
,
...
...
@@ -131,6 +159,10 @@ const testInfo = [
space
:
1.08
,
icon
:
'mushroom'
,
style
:
{
top
:
'9vmin'
,
left
:
'59vmin'
},
affix
:
{
title
:
'宿舍108'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--1-9'
,
...
...
@@ -138,6 +170,10 @@ const testInfo = [
space
:
1.09
,
icon
:
'pear'
,
style
:
{
top
:
'8vmin'
,
left
:
'51vmin'
},
affix
:
{
title
:
'宿舍109'
,
content
:
'休息室'
,
},
},
],
},
...
...
@@ -175,6 +211,10 @@ const testInfo = [
space
:
2.01
,
icon
:
'pepper'
,
style
:
{
top
:
'7vmin'
,
left
:
'22vmin'
},
affix
:
{
title
:
'宿舍201'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-2'
,
...
...
@@ -182,6 +222,10 @@ const testInfo = [
space
:
2.02
,
icon
:
'rocket'
,
style
:
{
top
:
'39vmin'
,
left
:
'5vmin'
},
affix
:
{
title
:
'宿舍202'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-3'
,
...
...
@@ -189,6 +233,10 @@ const testInfo = [
space
:
2.03
,
icon
:
'bug'
,
style
:
{
top
:
'21vmin'
,
left
:
'84vmin'
},
affix
:
{
title
:
'宿舍203'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-4'
,
...
...
@@ -196,6 +244,10 @@ const testInfo = [
space
:
2.04
,
icon
:
'books'
,
style
:
{
top
:
'39vmin'
,
left
:
'53vmin'
},
affix
:
{
title
:
'宿舍204'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-5'
,
...
...
@@ -203,6 +255,10 @@ const testInfo = [
space
:
2.05
,
icon
:
'eggplant'
,
style
:
{
top
:
'14vmin'
,
left
:
'50vmin'
},
affix
:
{
title
:
'宿舍205'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-6'
,
...
...
@@ -210,6 +266,10 @@ const testInfo = [
space
:
2.06
,
icon
:
'strawberry'
,
style
:
{
top
:
'60vmin'
,
left
:
'15vmin'
},
affix
:
{
title
:
'宿舍206'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-7'
,
...
...
@@ -217,6 +277,10 @@ const testInfo = [
space
:
2.07
,
icon
:
'heart'
,
style
:
{
top
:
'34vmin'
,
left
:
'37vmin'
},
affix
:
{
title
:
'宿舍207'
,
content
:
'休息室'
,
},
},
{
id
:
'pin--2-8'
,
...
...
@@ -224,6 +288,10 @@ const testInfo = [
space
:
2.08
,
icon
:
'wrench'
,
style
:
{
top
:
'52vmin'
,
left
:
'74vmin'
},
affix
:
{
title
:
'宿舍208'
,
content
:
'休息室'
,
},
},
],
},
...
...
src/utils/tools.js
View file @
6aa569d
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 202
2-06-30 13:54:32
* @FilePath: /
tswj
/src/utils/tools.js
* @LastEditTime: 202
3-08-07 13:31:59
* @FilePath: /
map-demo
/src/utils/tools.js
* @Description: 文件描述
*/
import
dayjs
from
'dayjs'
;
...
...
@@ -14,7 +14,7 @@ const formatDate = (date) => {
/**
* @description 判断浏览器属于平台
* @returns
* @returns
*/
const
wxInfo
=
()
=>
{
let
u
=
navigator
.
userAgent
;
...
...
@@ -22,17 +22,23 @@ const wxInfo = () => {
let
isiOS
=
!!
u
.
match
(
/
\(
i
[^
;
]
+;
(
U;
)?
CPU.+Mac OS X/
);
//ios终端
let
uAgent
=
navigator
.
userAgent
.
toLowerCase
();
let
isTable
=
(
uAgent
.
match
(
/MicroMessenger/i
)
==
'micromessenger'
)
?
true
:
false
;
let
isPC
=
uAgent
.
match
(
/
(
phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger
)
/i
,
)
?
false
:
true
;
return
{
isAndroid
,
isiOS
,
isTable
isTable
,
isPC
,
};
};
/**
* @description 判断多行省略文本
* @param {*} id 目标dom标签
* @returns
* @returns
*/
const
hasEllipsis
=
(
id
)
=>
{
let
oDiv
=
document
.
getElementById
(
id
);
...
...
@@ -45,8 +51,8 @@ const hasEllipsis = (id) => {
/**
* @description 解析URL参数
* @param {*} url
* @returns
* @param {*} url
* @returns
*/
const
parseQueryString
=
url
=>
{
var
json
=
{};
...
...
src/views/inner.vue
View file @
6aa569d
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-0
4 16:59:15
* @LastEditTime: 2023-08-0
7 10:58:59
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
...
...
@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup:
fals
e,
show_floor_popup:
tru
e,
}
},
async mounted() {
...
...
Please
register
or
login
to post a comment