Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
45b20416 1 parent 746bbc56

样式调整，定位功能调整

Inline Side-by-side
Showing 7 changed files with 171 additions and 112 deletions
......@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = map
# 是否开启调试
VITE_CONSOLE = 0
VITE_CONSOLE = 1
# appID相关
VITE_APPID=微信appID
......
......@@ -10,7 +10,6 @@ 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']
......@@ -23,8 +22,6 @@ declare module '@vue/runtime-core' {
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']
}
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 14:17:19
* @LastEditTime: 2023-07-19 10:42:05
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
......@@ -46,11 +46,7 @@ watchEffect(
// });
onMounted(async () => {
// 获取当前域名
if (!wxInfo().isMobile && !wxInfo().isWeiXin) {
location.href = location.origin + '/f/map/' + location.hash;
}
const { data } = await wxJsAPI({ url: '/f/map/#/' });
const { data } = await wxJsAPI();
data.jsApiList = apiList;
wx.config(data);
wx.ready(() => {
......
/*
* @Date: 2023-07-10 16:14:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 16:00:25
* @LastEditTime: 2023-07-19 11:01:52
* @FilePath: /map-demo/src/common/yard.js
* @Description: 文件描述
*/
......@@ -15,7 +15,7 @@ const testInfo = {
list: [
{
name: '拈花堂',
position: [120.586269, 31.313723],
position: [120.586212, 31.31433],
icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
details: [
{
......@@ -30,6 +30,30 @@ const testInfo = {
img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
book_url: '1', // 预定链接
},
{
id: '0',
name: '拈花堂-南厅',
type: '会议室',
sum: 130,
manager: '西仓库运营组长',
contact: '13876476873',
status: '正常',
note: '预订须知',
img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
book_url: '1', // 预定链接
},
{
id: '0',
name: '拈花堂-二层',
type: '会议室',
sum: 230,
manager: '西仓库运营组长',
contact: '13876476873',
status: '正常',
note: '预订须知',
img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
book_url: '1', // 预定链接
},
],
window_type: 'yard',
},
......
<template>
<div style="position: relative;">
<div class="info-window-warn-wrapper">
<div class="info-window-yarn-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)"
......@@ -21,8 +21,8 @@
<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">
<div v-if="yard_info.img_url" class="info-control">
<viewer :images="yard_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>
......@@ -32,13 +32,13 @@
</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;"
<div @click="goToNote()" 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;"
<div @click="goToOrder()" 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;
......@@ -54,6 +54,22 @@
<div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
<div class="leaflet-popup-tip"></div>
</div>
<van-popup
v-model:show="showPopup"
position="bottom"
:overlay="true"
:style="{ height: '90%' }"
teleport="body"
>
<van-icon name="cross" size="1.35rem" @click="showPopup = false" style="float: right; color: gray; margin-right: 1rem; margin-top: 1rem;" />
<div style="clear: both;">
<div style="color: #965f13; text-align: center; margin: 1rem; font-size: 1.25rem;">
用户须知
</div>
<div v-html="yard_info.note" style="padding: 1rem;"></div>
</div>
</van-popup>
</div>
</template>
......@@ -80,8 +96,8 @@ export default {
computed: {
warn_span1() {
let flag = false;
if (this.warn_info.case_url) {
if (this.warn_info.notice_url || this.warn_info.handle_url) {
if (this.yard_info.case_url) {
if (this.yard_info.notice_url || this.yard_info.handle_url) {
flag = true
}
}
......@@ -89,8 +105,8 @@ export default {
},
warn_span2() {
let flag = false;
if (this.warn_info.notice_url) {
if (this.warn_info.handle_url) {
if (this.yard_info.notice_url) {
if (this.yard_info.handle_url) {
flag = true
}
}
......@@ -103,7 +119,7 @@ export default {
},
infoWindow(val) {
if (val) {
this.warn_info = this.info.details[0]
this.yard_info = this.info.details[0]
}
}
},
......@@ -119,7 +135,7 @@ export default {
play_time: '00:00',
isActive: 0,
nav_scroll: false,
warn_info: {},
yard_info: {},
showBottom: false,
img_url: '',
show: false,
......@@ -128,7 +144,8 @@ export default {
title: false,
toolbar: false,
navbar: false,
}
},
showPopup: false
}
},
methods: {
......@@ -141,24 +158,12 @@ export default {
// 滚动状态
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;
// }
goToNote () {
this.showPopup = true;
console.warn(this.yard_info);
},
goToOrder () {},
goToLocation () {},
onClose () {
window.devicePixelRatio = 1;
},
......@@ -168,7 +173,7 @@ export default {
// if (index === 2 && this.info.details.length > 3) {
// this.handleNavScroll()
// }
this.warn_info = this.info.details[index]
this.yard_info = this.info.details[index]
},
handleNavScroll() { // 滚动标题
this.nav_scroll = !this.nav_scroll;
......@@ -191,7 +196,7 @@ export default {
</script>
<style lang="less">
.info-window-warn-wrapper {
.info-window-yarn-wrapper {
background: #fff;
color: #333;
-webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
......@@ -311,7 +316,7 @@ export default {
text-align: left;
.item {
width: 30%;
width: 35%;
flex-shrink: 0;
color: #888;
font-size: 1.1rem;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 15:02:13
* @LastEditTime: 2023-07-19 06:38:25
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -25,7 +25,7 @@
</div>
<van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
:style="{ padding: '1rem', bottom: '4.5rem' }">
:style="{ padding: '1rem', bottom: '6rem' }">
<div style="text-align: left;">
<div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
style="margin-bottom: 1rem; font-size: 1.15rem;">
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 16:48:31
* @LastEditTime: 2023-07-19 11:23:33
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
-->
......@@ -25,7 +25,7 @@
</div>
<van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
:style="{ padding: '1rem', bottom: '4.5rem' }">
:style="{ padding: '1rem', bottom: '6rem' }">
<div style="text-align: left;">
<div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
style="margin-bottom: 1rem; font-size: 1.15rem;">
......@@ -36,10 +36,10 @@
</div>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<!-- <div class="item" @click="setLocation">
<div class="item" @click="setLocation">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
style="vertical-align: middle;" />
</div> -->
</div>
<div class="item" @click="selectRoute">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
style="vertical-align: middle;" />
......@@ -83,28 +83,28 @@
<!-- 隐藏不要使用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> -->
<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;" />
<van-icon name="cross" size="1.35rem" @click="closeMember" 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-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>
</van-cell-group> -->
<!-- end -->
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell">
......@@ -203,7 +203,7 @@ const GPS = {
};
export default {
components: { InfoWindow },
components: { InfoWindow, InfoWindowLite, InfoWindowWarn, InfoWindowYard },
data() {
return {
map: '',
......@@ -301,16 +301,6 @@ export default {
// this.map.resize();
// console.warn(0);
// }, 1000 * 10);
// wx.getLocation({
// type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
// success: function (res) {
// var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
// var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
// var speed = res.speed; // 速度，以米/每秒计
// var accuracy = res.accuracy; // 位置精度
// console.warn(res);
// }
// });
},
watch: {
show_popup(val) {
......@@ -526,31 +516,32 @@ export default {
// fillColor: '#CFE7AA'
// });
// },
// isPointInRing() { // 是否在景区范围
// let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
// [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
// ]);
// return isPointInRing
// },
// setLocation() { // 开启定位服务
// // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
// if (!this.current_lng || !this.current_lat) {
// this.getLocation()
// } else {
// // 使用纠正偏移后的地址，打一个定位标记
// var marker = new AMap.Marker({
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(marker);
// // 定位到地图中心-西园寺
// this.map.setCenter([120.587334, 31.314823]);
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// this.dialog_text = '您不在景区范围内';
// }
// }
// },
isPointInRing() { // 是否在景区范围
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
return isPointInRing
},
setLocation() { // 开启定位服务
// this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
if (!this.current_lng || !this.current_lat) {
this.getLocation()
} else {
// 使用纠正偏移后的地址，打一个定位标记
var marker = new AMap.Marker({
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(marker);
// 定位到地图中心-西园寺
// this.map.setCenter([120.587334, 31.314823]);
this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
// 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// this.dialog_text = '您不在景区范围内';
// }
}
},
getLocation() { // 获取经纬度
AMap.plugin(['AMap.Geolocation'], () => {
this.geolocation = new AMap.Geolocation(this.location_options);
......@@ -570,6 +561,19 @@ export default {
}
})
});
// 微信获取地址
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
console.warn(this.current_lng, this.current_lat);
}
});
},
setZoom(type) { // 设置放大缩小地图
const zoom = this.map.getZoom();
......@@ -946,10 +950,6 @@ export default {
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) {
// 此时需要把组件的样式设置为可见
......@@ -1050,32 +1050,23 @@ export default {
closeInfoWindow() {
if (this.showInfoWindow) {
this.$refs['infoWindow'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
if (this.showInfoWindowLite) {
this.$refs['infoWindowLite'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
if (this.showInfoWindowWarn) {
this.$refs['infoWindowWarn'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
if (this.showInfoWindowYard) {
this.$refs['infoWindowYard'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
},
closeMember () {
this.show_member_popup = false;
},
onPlay (name) {
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......@@ -1300,7 +1291,7 @@ export default {
}
.popup-wrapper {
margin-top: 1rem;
margin: 1rem;
.title {
font-size: 1.25rem;
......@@ -1341,4 +1332,50 @@ export default {
font-size: 0.8rem;
}
.van-cell-group--inset {
margin: 0 0.466667vw;
border-radius: 2.133333vw;
overflow: hidden;
}
.van-cell-group {
background: '#fff';
}
.van-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 2.666667vw 4.266667vw;
overflow: hidden;
color: #323233;
font-size: 3.733333vw;
line-height: 6.4vw;
background: #fff;
}
.van-cell__title, .van-cell__value {
flex: 1;
}
.van-cell__value {
position: relative;
overflow: hidden;
color: #969799;
text-align: right;
vertical-align: middle;
word-wrap: break-word;
}
.van-cell:after {
position: absolute;
box-sizing: border-box;
content: " ";
pointer-events: none;
right: 4.266667vw;
bottom: 0;
left: 4.266667vw;
border-bottom: 1px solid #ebedf0;
transform: scaleY(.5);
}
</style>
......