Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
746bbc56 1 parent 85c1803f

新增场地和人员设置

Inline Side-by-side
Showing 11 changed files with 837 additions and 26 deletions
......@@ -10,14 +10,21 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
InfoWindowYard: typeof import('./src/components/InfoWindowYard.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCell: typeof import('vant/es')['Cell']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanImagePreview: typeof import('vant/es')['ImagePreview']
VanOverlay: typeof import('vant/es')['Overlay']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
}
......
......@@ -30,6 +30,7 @@
"typescript": "^4.7.3",
"unplugin-vue-components": "^0.24.1",
"uuid": "^8.3.2",
"v-viewer": "^3.0.11",
"vant": "^4.0.0-alpha.3",
"vconsole": "^3.14.6",
"video.js": "^8.3.0",
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-17 15:37:47
* @LastEditTime: 2023-07-18 14:17:19
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
......@@ -25,8 +25,9 @@ import { Toast } from 'vant';
import vConsole from '@/utils/vconsole'
// 初始化WX环境
import wx from 'weixin-js-sdk'
// import { wxJsAPI } from '@/api/wx/config'
// import { apiList } from '@/api/wx/jsApiList.js'
import { wxJsAPI } from '@/api/wx/config'
import { apiList } from '@/api/wx/jsApiList.js'
import { wxInfo } from '@/utils/tools'
// 使用 include + pinia 状态管理动态缓存页面
const store = mainStore()
......@@ -45,15 +46,19 @@ watchEffect(
// });
onMounted(async () => {
// const { data } = await wxJsAPI();
// data.jsApiList = apiList;
// wx.config(data);
// wx.ready(() => {
// wx.showAllNonBaseMenuItem();
// });
// wx.error((err) => {
// console.warn(err);
// });
// 获取当前域名
if (!wxInfo().isMobile && !wxInfo().isWeiXin) {
location.href = location.origin + '/f/map/' + location.hash;
}
const { data } = await wxJsAPI({ url: '/f/map/#/' });
data.jsApiList = apiList;
wx.config(data);
wx.ready(() => {
wx.showAllNonBaseMenuItem();
});
wx.error((err) => {
console.warn(err);
});
})
</script>
......
/*
* @Date: 2023-07-10 16:14:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 16:33:08
* @FilePath: /map-demo/src/common/members.js
* @Description: 文件描述
*/
const testInfo = {
id: 'members',
name: '人员',
icon: [
'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BA%BA%E5%91%9802@2x.png',
'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BA%BA%E5%91%9801@2x.png',
],
list: [
{
name: '义工',
position: [120.587721, 31.31423],
icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A5@2x.png',
details: [
{
id: '0',
name: '王大发（慧东）',
contact: '1331234567',
group: '拈花堂组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '王大发（慧东）',
contact: '1331234567',
group: '拈花堂组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '王大发（慧东）',
contact: '1331234567',
group: '拈花堂组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '王大发（慧东）',
contact: '1331234567',
group: '拈花堂组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
],
window_type: 'member',
},
{
name: '安保人员',
position: [120.585991, 31.314314],
icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BF%9D%E5%AE%89@2x.png',
details: [
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
],
window_type: 'member',
},
{
name: '设备维修人员',
position: [120.585537, 31.313794],
icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E7%BB%B4%E4%BF%AE%E4%BA%BA%E5%91%98@2x.png',
details: [
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
{
id: '0',
name: '潘苗苗',
contact: '1331234567',
group: '弘法部接待组',
},
],
window_type: 'member',
},
],
};
export default testInfo;
/*
* @Date: 2023-07-10 16:14:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 16:00:25
* @FilePath: /map-demo/src/common/yard.js
* @Description: 文件描述
*/
const testInfo = {
id: 'yard',
name: '场地',
icon: [
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B002@2x.png',
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B001@2x.png',
],
list: [
{
name: '拈花堂',
position: [120.586269, 31.313723],
icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
details: [
{
id: '0',
name: '拈花堂-北厅',
type: '会议室',
sum: 30,
manager: '西仓库运营组长',
contact: '13876476873',
status: '正常',
note: '预订须知',
img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
book_url: '1', // 预定链接
},
],
window_type: 'yard',
},
{
name: '静心堂',
position: [120.58624, 31.313982],
icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
details: [
{
id: '0',
name: '静心堂',
type: '大禅堂',
sum: 120,
manager: '西仓库运营组长',
contact: '13876476873',
status: '正常',
note: '预订须知',
img_url: ['https://cdn.ipadbiz.cn/xys/temp/2252295669ecec014189299b385ffa87.jpg'], // 图片链接
book_url: '1', // 预定链接
},
],
window_type: 'yard',
},
],
};
export default testInfo;
<template>
<div style="position: relative;">
<div class="info-window-warn-wrapper">
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
:class="[isActive === index ? 'checked' : '', 'item']">
<span>{{ item.name }}</span>
</div>
</div>
<!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
<van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
<van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
</div> -->
<div v-for="(item, index) in info?.details" :key="index">
<div v-if="isActive === index">
<div style="width: 80%; float: left; color: #888; line-height: 1.75;">
<div>类型: {{ item.type }}</div>
<div>容纳人数: {{ item.sum }}</div>
<div>负责人: {{ item.manager }}</div>
<div>联系电话: {{ item.contact }}</div>
<div>状态: {{ item.status }}</div>
</div>
<div v-if="warn_info.img_url" class="info-control">
<viewer :images="warn_info.img_url" :options="options" class="images clearfix">
<template #default="scope">
<van-image v-for="src in scope.images" width="100%" fit="contain" :src="src" />
</template>
</viewer>
</div>
</div>
</div>
</div>
<div class="van-hairline--top warn-button-wrapper">
<div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
class="van-hairline--right">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: sub;" />&nbsp;
<span style="color: #AB8F57; font-size: 1rem;">须知</span>
</div>
<div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
class="van-hairline--right">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/icon/%E9%A2%84%E5%AE%9A@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: sub;" />&nbsp;
<span style="color: #AB8F57; font-size: 1rem;">预定</span>
</div>
<div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: sub;" />&nbsp;
<span style="color: #AB8F57; font-size: 1rem;">前往</span>
</div>
</div>
</div>
<div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
<div class="leaflet-popup-tip"></div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
infoWindow: {
type: Object,
default: () => { }
},
info: {
type: Object,
default: () => { }
},
rect: {
type: Object,
default: () => { }
},
},
mounted() {
},
computed: {
warn_span1() {
let flag = false;
if (this.warn_info.case_url) {
if (this.warn_info.notice_url || this.warn_info.handle_url) {
flag = true
}
}
return flag;
},
warn_span2() {
let flag = false;
if (this.warn_info.notice_url) {
if (this.warn_info.handle_url) {
flag = true
}
}
return flag;
},
},
watch: {
rect(val) {
this.widow_info = val;
},
infoWindow(val) {
if (val) {
this.warn_info = this.info.details[0]
}
}
},
data() {
return {
popup_title: '',
popup_content: '',
video_src: '',
ind: '',
is_play: false,
audio: new Audio(),
widow_info: {},
play_time: '00:00',
isActive: 0,
nav_scroll: false,
warn_info: {},
showBottom: false,
img_url: '',
show: false,
images: ['https://picsum.photos/200/200'],
options: {
title: false,
toolbar: false,
navbar: false,
}
}
},
methods: {
// 关闭
close() {
// 高德地图信息窗关闭的api
this.infoWindow.close()
// 默认选中项
this.isActive = 0;
// 滚动状态
this.nav_scroll = false;
},
goToCase(url) {
if (url) {
location.href = url;
}
},
goToList(id) {
this.$router.push({
path: '/noticeList',
query: {
id
}
})
},
goToHandle(url) {
// if (url) {
// location.href = url;
// }
},
onClose () {
window.devicePixelRatio = 1;
},
handleTitle(index) {
this.isActive = index;
// // 标题滚动
// if (index === 2 && this.info.details.length > 3) {
// this.handleNavScroll()
// }
this.warn_info = this.info.details[index]
},
handleNavScroll() { // 滚动标题
this.nav_scroll = !this.nav_scroll;
if (this.nav_scroll) {
setTimeout(() => {
$('.info-window-title').animate({
scrollLeft: $('.info-window-title .item').outerWidth() * 3
}, 1000);
}, 100);
} else {
setTimeout(() => {
$('.info-window-title').animate({
scrollLeft: 0
}, 1000);
}, 100);
}
}
}
}
</script>
<style lang="less">
.info-window-warn-wrapper {
background: #fff;
color: #333;
-webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
text-align: left;
border-radius: 5px;
padding: 1.5rem 1.25rem;
overflow: auto;
.info-text {
width: 100%;
line-height: 1.5;
float: left;
color: #7A6C6C;
}
.info-text-audio {
width: 80%;
line-height: 1.5;
float: left;
color: #7A6C6C;
}
.info-control {
width: 20%;
float: left;
text-align: center;
color: #AB8F57;
.control-play {
text-align: center;
margin-bottom: 0.5rem;
i {
margin-top: 0 !important;
}
}
}
// .t-popup-content {
// position: relative;
// width: 25rem;
// padding: 0;
// margin: 0;
// border-radius: 0.1rem;
// background: rgba(255, 255, 255, 0.9);
// -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
// box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
// line-height: 1.4;
// .view-name {
// margin: 0;
// padding: 0.5rem;
// width: 25rem;
// height: 2.5rem;
// font-size: 1.2rem;
// text-indent: 0.2rem;
// white-space: nowrap;
// text-overflow: ellipsis;
// color: #5b5b5b;
// -webkit-box-sizing: border-box;
// box-sizing: border-box;
// border-bottom: solid 1px #e8e8e8;
// border-radius: 0.1rem 0.1rem 0 0;
// background: #f7f7f7;
// overflow: hidden;
// }
// .view-photo {
// display: block;
// float: left;
// margin: 0.5rem;
// height: 100%;
// width: 9rem;
// height: 9rem;
// border-radius: 3px;
// }
// .introduction {
// float: left;
// margin: 0.2rem 0;
// width: 13.5rem;
// height: 6.75rem;
// font-size: 0.9rem;
// color: #202020;
// overflow: hidden;
// }
// // .control-play {
// // display: block;
// // float: left;
// // margin-right: 0.5rem;
// // width: 7rem;
// // height: 3rem;
// // border-radius: 2px;
// // background: #ffdd02 center no-repeat;
// // background-size: 6.5rem 3rem;
// // }
// .show-details {
// display: block;
// float: left;
// width: 7rem;
// height: 3rem;
// border-radius: 2px;
// background: #9196a9 center no-repeat;
// background-size: 6.5rem 3rem;
// }
// }
.info-window-title {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
text-align: left;
.item {
width: 30%;
flex-shrink: 0;
color: #888;
font-size: 1.1rem;
margin-bottom: 0.75rem;
display: inline-block;
margin-right: 0.5rem;
}
.checked {
color: #AB8F57;
span {
border-bottom: 1.5px solid #AB8F57;
padding-bottom: 3px;
}
}
}
}
.leaflet-popup-tip-container {
margin-top: -1px;
width: 2rem;
height: 2rem;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 1rem;
height: 1rem;
-webkit-transform: rotate(0);
transform: rotate(0);
background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
background-size: 1rem 1rem;
box-shadow: none;
}
.warn-button-wrapper {
margin-top: 1rem;
display: flex;
justify-content: space-around;
.f-line {
text-align: center;
margin-top: 1rem;
}
}
.hideScrollBar::-webkit-scrollbar {
display: none;
}
.hideScrollBar {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
background-color: #fff;
}
</style>
......@@ -2,12 +2,45 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 12:06:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-30 13:12:21
* @LastEditTime: 2023-07-18 14:02:08
* @FilePath: /map-demo/src/main.js
* @Description:
*/
import { createApp } from 'vue';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search } from 'vant';
import {
Button,
Image as VanImage,
Col,
Row,
Icon,
Form,
Field,
CellGroup,
ConfigProvider,
Toast,
Uploader,
Empty,
Tab,
Tabs,
Overlay,
NumberKeyboard,
Lazyload,
List,
PullRefresh,
Popup,
Picker,
Sticky,
Stepper,
Tag,
Swipe,
SwipeItem,
Dialog,
ActionSheet,
Loading,
Checkbox,
Search,
ImagePreview,
} from 'vant';
import router from './router';
import App from './App.vue';
// import axios from './utils/axios';
......@@ -19,13 +52,51 @@ import 'font-awesome/css/font-awesome.min.css';
import VueVideoPlayer from '@videojs-player/vue';
import 'video.js/dist/video-js.css';
import 'viewerjs/dist/viewer.css';
import VueViewer from 'v-viewer';
const pinia = createPinia();
const app = createApp(App);
app.config.globalProperties.$http = axios; // 关键语句
app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider);
app
.use(pinia)
.use(router)
.use(Button)
.use(VanImage)
.use(Col)
.use(Row)
.use(Icon)
.use(Form)
.use(Field)
.use(CellGroup)
.use(Toast)
.use(Uploader)
.use(Empty)
.use(Tab)
.use(Tabs)
.use(Overlay)
.use(NumberKeyboard)
.use(Lazyload)
.use(List)
.use(PullRefresh)
.use(Popup)
.use(Picker)
.use(Sticky)
.use(Stepper)
.use(Tag)
.use(Swipe)
.use(SwipeItem)
.use(Dialog)
.use(ActionSheet)
.use(Loading)
.use(Checkbox)
.use(Search)
.use(ConfigProvider)
.use(ImagePreview);
app.use(VueVideoPlayer)
app.use(VueViewer);
app.mount('#app');
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-07 11:09:02
* @LastEditTime: 2023-07-18 09:47:03
* @FilePath: /map-demo/src/utils/axios.js
* @Description:
*/
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-17 22:11:32
* @LastEditTime: 2023-07-18 15:02:13
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -161,7 +161,7 @@ const GPS = {
};
export default {
components: { InfoWindow },
components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground },
data() {
return {
map: '',
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-17 22:18:51
* @LastEditTime: 2023-07-18 16:48:31
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
-->
......@@ -83,12 +83,46 @@
<!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
@onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow>
<InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
<!-- <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
:rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
<InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
:rect="rect"></InfoWindowWarn>
:rect="rect"></InfoWindowWarn> -->
<InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
:rect="rect"></InfoWindowYard>
<audioBackground></audioBackground>
<!-- <audioBackground></audioBackground> -->
<van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
<van-icon name="cross" size="1.35rem" @click="show_member_popup = false" style="float: right; color: gray; margin-right: 1rem;" />
<div id="member-list" class="popup-wrapper" style="clear: both;">
<div style="color: #965f13; text-align: center; margin-bottom: 1rem; font-size: 1.25rem;">
{{ itemInfo.name }}
</div>
<div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;">
<!-- 临时引用演示 -->
<van-cell-group inset v-show="false">
<van-cell title="姓名" :value="item.name" />
<van-cell title="手机号" :value="item.contact" />
<van-cell title="组别" :value="item.group" />
</van-cell-group>
<!-- end -->
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell">
<div class="van-cell__title"> <span>姓名</span> </div>
<div class="van-cell__value"> <span>{{ item.name }}</span></div>
</div>
<div class="van-cell">
<div class="van-cell__title"> <span>手机号</span> </div>
<div class="van-cell__value"> <span><a :href="'tel:' + item.contact" style="color: #965f13;">{{ item.contact }}</a></span></div>
</div>
<div class="van-cell">
<div class="van-cell__title"><span>组别</span></div>
<div class="van-cell__value"><span>{{ item.group }}</span></div>
</div>
</div>
</div>
</div>
</van-popup>
</div>
</template>
......@@ -96,13 +130,15 @@
// import { mapState } from 'vuex'
import coord from '@/common/map_data'
import map_max from '@/common/max'
import map_alert from '@/common/alert'
import map_yard from '@/common/yard'
import map_members from '@/common/members'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
import InfoWindow from '@/components/InfoWindow'
import InfoWindowLite from '@/components/InfoWindowLite'
import InfoWindowWarn from '@/components/InfoWindowWarn'
import InfoWindowYard from '@/components/InfoWindowYard'
import audioBackground from '@/components/audioBackground'
import { useRect } from '@vant/use';
......@@ -198,6 +234,7 @@ export default {
current_route: '',
current_safe_route: '',
show_popup: false,
show_member_popup: false,
dialog_show: false,
dialog_text: '',
walk_route: '',
......@@ -213,9 +250,11 @@ export default {
showInfoWindow: false,
showInfoWindowLite: false,
showInfoWindowWarn: false,
showInfoWindowYard: false,
infoWindow: {},
infoWindowLite: {},
infoWindowWarn: {},
infoWindowYard: {},
itemInfo: {},
navBarList: [],
rect: {},
......@@ -234,14 +273,15 @@ export default {
},
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900],
mapTiles: []
mapTiles: [],
}
},
async mounted() {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({i: code});
data.list = data.list.concat(map_alert);
data.list = data.list.concat(map_yard);
data.list = data.list.concat(map_members);
this.navBarList = data.list; // 底部导航条
this.mapTiles = data.level; // 获取图层
this.navKey = data.list[0]['id']; // 默认选中 第一个 id
......@@ -302,6 +342,13 @@ export default {
const rect = useRect(this.$refs.root);
this.rect = rect;
}
},
showInfoWindowYard(val) {
if (val) {
// 元素的大小及其相对于视口的位置
const rect = useRect(this.$refs.root);
this.rect = rect;
}
}
},
methods: {
......@@ -443,12 +490,19 @@ export default {
this.positionLiteMarker(entity_info[i])
} else if (entity_info[i].window_type === 'warn') {
this.positionWarnMarker(entity_info[i])
} else if (entity_info[i].window_type === 'yard') {
this.positionYardMarker(entity_info[i])
} else if (entity_info[i].window_type === 'member') {
this.positionMemberMarker(entity_info[i])
}
})
// 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
// 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new AMap.LabelsLayer({
collision: true,
zooms: [3, 20],
zIndex: 1000,
collision: true, // 该层内标注是否避让
allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
});
// // 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
......@@ -831,6 +885,10 @@ export default {
this.positionLiteMarker(item)
} else if (item.window_type === 'warn') {
this.positionWarnMarker(item)
} else if (item.window_type === 'yard') {
this.positionYardMarker(item)
} else if (item.window_type === 'member') {
this.positionMemberMarker(item)
}
},
positionMarker(item) {
......@@ -869,6 +927,30 @@ export default {
zoomEnable: false
});
},
positionYardMarker(item) {
// 点击后创建自定义信息窗口
this.setInfoWindowsYard(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
//
this.show_nav_popup = false;
// 禁止缩放
this.map.setStatus({
zoomEnable: false
});
},
positionMemberMarker(item) {
// 点击后出现弹框
this.setInfoWindowsMember(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
//
this.show_nav_popup = false;
// 禁止缩放
this.map.setStatus({
zoomEnable: false
});
},
setInfoWindows(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindow = true
......@@ -935,6 +1017,36 @@ export default {
// 信息窗口打开
infoWindowWarn.open(this.map, item.position);
},
setInfoWindowsYard(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindowYard = true
// 设置marker头部的标题信息窗口
const infoWindowYard = new AMap.InfoWindow({
// 使用自定义窗体
isCustom: true,
// 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
content: this.$refs['infoWindowYard'].$el,
// 设置定位偏移量
offset: new AMap.Pixel(0, -30),
})
this.infoWindowYard = infoWindowYard;
this.itemInfo = item;
this.itemInfo.map = this.map;
this.itemInfo.LngLat = {
lng: this.current_lng,
lat: this.current_lat,
}
// 信息窗口打开
infoWindowYard.open(this.map, item.position);
},
setInfoWindowsMember(item) {
this.itemInfo = item;
this.show_member_popup = true;
// 列表滚动到顶部
setTimeout(() => {
$('.van-popup').animate({ scrollTop: 0 }, 100);
}, 100);
},
closeInfoWindow() {
if (this.showInfoWindow) {
this.$refs['infoWindow'].close();
......@@ -957,6 +1069,13 @@ export default {
zoomEnable: true
});
}
if (this.showInfoWindowYard) {
this.$refs['infoWindowYard'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
},
onPlay (name) {
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......@@ -1221,4 +1340,5 @@ export default {
padding: 5px 12px;
font-size: 0.8rem;
}
</style>
......
This diff could not be displayed because it is too large.