Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
45d23ee3 1 parent 20d06d5c

导航样式调整

Inline Side-by-side
Showing 2 changed files with 56 additions and 38 deletions
......@@ -91,7 +91,7 @@ var touristSpots = [{
var spotInfo = [
{
name: '三宝楼',
position: [120.587519, 31.315924],
position: [120.587436, 31.316177],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
},
{
......@@ -101,7 +101,7 @@ var spotInfo = [
},
{
name: '罗汉堂',
position: [120.58764, 31.315011],
position: [120.587581, 31.31505],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
......@@ -116,7 +116,7 @@ var spotInfo = [
},
{
name: '大雄宝殿',
position: [120.587249, 31.314722],
position: [120.587116, 31.314809],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
......@@ -147,12 +147,12 @@ var toiletInfo = [
var activityInfo = [
{
name: '西花园湖心亭',
position: [120.586253, 31.315273],
position: [120.586478, 31.315098],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
},
{
name: '四百岁神龟',
position: [120.585948, 31.315095],
position: [120.585947, 31.315011],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
},
];
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-02 10:57:57
* @LastEditTime: 2023-06-02 16:03:29
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -19,39 +19,39 @@
<div style="width: 4rem;flex-shrink: 0;"></div>
<div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
<div style="padding-top: 40%;">
<van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" />
<van-icon v-else name="arrow-up" @click="handleNavPopup" size="1.15rem" />
<van-icon v-if="!show_nav_popup" name="arrow-up" @click="handleNavPopup" size="1.15rem" />
<van-icon v-else name="arrow-down" @click="handleNavPopup" size="1.15rem" />
</div>
</div>
</div>
<van-popup v-model:show="show_nav_popup" position="top" duration="0" :overlay="false"
:style="{ padding: '1rem', top: '4.5rem' }">
<van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
:style="{ padding: '1rem', bottom: '4.5rem' }">
<div style="text-align: left;">
<div @click="positionMarker" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
<div @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
</div>
</van-popup>
</div>
<div class="safe-route-wrapper">
<!-- <div class="safe-route-wrapper">
<span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
<span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
</div>
<div class="tool-bar-wrapper">
</div> -->
<!-- <div class="tool-bar-wrapper">
<div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
<van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
<van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
<van-icon name="aim" @click="setLocation" />
</div>
</div>
</div> -->
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<!-- <div class="item" @click="setTitleLayer">
<i class="fa fa-cube"></i><br />
贴片
</div> -->
<div class="item" @click="setLocation">
<i class="fa fa-crosshairs"></i><br />
定位
</div>
<div v-if="show_walk_route" class="item" @click="setWalkRoute">
<i class="fa fa-eye"></i><br />
步行
......@@ -60,17 +60,27 @@
<i class="fa fa-eye-slash"></i><br />
步行
</div>
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<i class="fa fa-eye"></i><br />
路线
</div>
<div v-else class="item" @click="handleSafeRoute(false)">
<i class="fa fa-eye-slash"></i><br />
路线
</div>
</div>
</div>
<!-- <div style="position: fixed; bottom: 0; height: 2rem; width: 100%; background-color: white; z-index: 999;"></div> -->
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="title">
{{ popup_title }}
</div>
<div class="content" v-html="popup_content">
</div>
<video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
<div class="content" v-html="popup_content"></div>
<video-player ref="videoPlayer" style="width: 100%; height: 30vh; margin-top: 1rem;"
poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
:src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
</div>
......@@ -264,7 +274,7 @@ export default {
layers: [
// new AMap.TileLayer.RoadNet(),
],
features: ['bg'], // 设置地图上显示的元素种类
features: ['bg', 'road'], // 设置地图上显示的元素种类
animateEnable: false, // 地图平移过程中是否使用动画
});
// 添加地图点击事件
......@@ -451,10 +461,12 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.show_popup = true;
this.popup_title = x.name;
this.popup_content = x.note;
this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
// this.show_popup = true;
// this.popup_title = x.name;
// this.popup_content = x.note;
// this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
// this.positionMarker(coord.spotInfo[i].position);
this.positionMarker([120.587519, 31.315924]);
})
//
this.spotInfo.push(marker);
......@@ -715,7 +727,7 @@ export default {
setTitleLayer() {
var layer = new AMap.TileLayer.Flexible({
cacheSize: 50,
opacity: 1,
opacity: 0.5,
zIndex: 100,
createTile: function (x, y, z, success, fail) {
if (z === 17) {
......@@ -738,7 +750,6 @@ export default {
return;
}
}
console.warn(z);
var img = document.createElement('img');
img.onload = function () {
......@@ -899,12 +910,11 @@ export default {
handleNavPopup() {
this.show_nav_popup = !this.show_nav_popup
},
positionMarker() {
// this.setInfoWindow([120.587519, 31.315924])
positionMarker(position = [120.587519, 31.315924]) {
// 点击后创建自定义信息窗口
this.setInfoWindows([120.587519, 31.315924])
this.setInfoWindows(position)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
this.map.setZoomAndCenter(this.zoom, position);
//
this.show_nav_popup = false;
},
......@@ -985,14 +995,15 @@ export default {
}
.nav-bar-wrapper {
position: absolute;
top: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4.5rem;
width: 100%;
background-color: white;
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
z-index: 999;
.item {
padding-top: 0.5rem;
......@@ -1005,7 +1016,7 @@ export default {
.safe-route-wrapper {
position: absolute;
bottom: 1rem;
bottom: 2rem;
right: 1rem;
background-color: white;
}
......@@ -1045,7 +1056,10 @@ export default {
margin-bottom: 0.85rem;
}
.content {}
.content {
line-height: 1.75;
font-size: 0.95rem;
}
}
......@@ -1057,4 +1071,8 @@ export default {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.van-dialog__confirm, .van-dialog__confirm:active {
color: #AB8F57;
}
</style>
......