Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
83507edb 1 parent 9031486a

样式和定位调整

Inline Side-by-side
Showing 4 changed files with 57 additions and 24 deletions
......@@ -107,7 +107,7 @@
var spotInfo = [
{
name: '照壁',
position: [120.587882, 31.312914],
position: [120.587882, 31.312884],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -117,6 +117,7 @@ var spotInfo = [
},
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
},
{
name: '福德智慧二桥',
......@@ -130,10 +131,11 @@ var spotInfo = [
},
],
// zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
window_type: 'normal',
},
{
name: '御赐牌楼',
position: [120.587823, 31.313296],
position: [120.587823, 31.313276],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -143,10 +145,11 @@ var spotInfo = [
},
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
},
{
name: '山门殿',
position: [120.587811, 31.313528],
position: [120.587811, 31.313508],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -156,10 +159,11 @@ var spotInfo = [
},
],
// zoom: { 17: 1, 18: 1, 19: 1, 20: 0 },
window_type: 'normal',
},
{
name: '钟楼',
position: [120.587987, 31.31413],
position: [120.587985, 31.31411],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -168,10 +172,11 @@ var spotInfo = [
url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
},
],
window_type: 'normal',
},
{
name: '鼓楼',
position: [120.58751, 31.314075],
position: [120.5875, 31.31407],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -180,10 +185,11 @@ var spotInfo = [
url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
},
],
window_type: 'normal',
},
{
name: '天王殿',
position: [120.587699, 31.314548],
position: [120.58769, 31.314535],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
......@@ -203,6 +209,7 @@ var spotInfo = [
url: 'https://mp.weixin.qq.com/s/7t_jrhWGCCotx2erQNK2Mw',
},
],
window_type: 'normal',
},
{
name: '大雄宝殿',
......@@ -230,6 +237,7 @@ var spotInfo = [
url: 'https://mp.weixin.qq.com/s/WkEwZwXa0mEPzKCBohhY2Q',
},
],
window_type: 'normal',
},
{
name: '罗汉堂',
......@@ -262,6 +270,7 @@ var spotInfo = [
url: 'https://mp.weixin.qq.com/s/OwqYLL61YplHYPCvHdXakg',
},
],
window_type: 'normal',
},
{
name: '观音殿',
......@@ -275,6 +284,7 @@ var spotInfo = [
audio: '',
},
],
window_type: 'normal',
},
{
name: '藏经楼',
......@@ -287,10 +297,11 @@ var spotInfo = [
url: '',
},
],
window_type: 'normal',
},
{
name: '西花园湖心亭',
position: [120.586538, 31.315118],
position: [120.58653, 31.315118],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
......@@ -299,10 +310,11 @@ var spotInfo = [
url: 'https://www.jcedu.org/202012/17340.html',
},
],
window_type: 'normal',
},
{
name: '四百岁神龟',
position: [120.586107, 31.315011],
position: [120.586157, 31.315011],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
......@@ -311,13 +323,14 @@ var spotInfo = [
url: 'https://www.jcedu.org/202012/17293.html',
},
],
window_type: 'normal',
},
];
var toiletInfo = [
{
name: '卫生间',
position: [120.587063, 31.314234],
position: [120.587103, 31.314234],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
details: [
{
......@@ -326,6 +339,7 @@ var toiletInfo = [
url: '',
},
],
window_type: 'lite',
},
];
......@@ -341,13 +355,14 @@ var warnInfo = [
url: '',
},
],
window_type: 'lite',
},
];
var activityInfo = [
{
name: '素食馆',
position: [120.587152, 31.314396],
position: [120.587352, 31.314496],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
details: [
{
......@@ -356,10 +371,11 @@ var activityInfo = [
url: '',
},
],
window_type: 'lite',
},
{
name: '包子铺',
position: [120.586812, 31.314195],
position: [120.586912, 31.314195],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
......@@ -368,10 +384,11 @@ var activityInfo = [
url: '',
},
],
window_type: 'lite',
},
{
name: '开水房',
position: [120.586752, 31.314069],
position: [120.586812, 31.314049],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
......@@ -380,10 +397,11 @@ var activityInfo = [
url: '',
},
],
window_type: 'lite',
},
{
name: '茶室',
position: [120.5868, 31.314981],
position: [120.58681, 31.314981],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
......@@ -392,13 +410,14 @@ var activityInfo = [
url: '',
},
],
window_type: 'lite',
},
];
const publicInfo = [
{
name: '南门',
position: [120.587788, 31.313383],
position: [120.587811, 31.313508],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
details: [
{
......@@ -407,10 +426,11 @@ const publicInfo = [
url: '',
},
],
window_type: 'lite',
},
{
name: '东门',
position: [120.588272, 31.31421],
position: [120.588272, 31.31435],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
details: [
{
......@@ -419,6 +439,7 @@ const publicInfo = [
url: '',
},
],
window_type: 'lite',
},
];
......
......@@ -392,11 +392,11 @@ export default {
}
}
.leaflet-popup-tip-container {
.leaflet-popup-tip-container { // 信息框箭头样式
margin-top: -1px;
width: 2rem;
height: 2rem;
margin-left: -20px;
margin-left: -10px;
overflow: hidden;
pointer-events: none;
}
......
......@@ -13,7 +13,7 @@
</div>
</div>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
<div @click="goToLocation()" style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
......@@ -96,6 +96,9 @@ export default {
goTo(url) {
location.href = this.info.details[this.isActive].url;
},
goToLocation() {
this.$emit('onLocation', this.info.position)
}
}
}
</script>
......@@ -241,7 +244,7 @@ export default {
margin-top: -1px;
width: 2rem;
height: 2rem;
margin-left: -20px;
margin-left: -10px;
overflow: hidden;
pointer-events: none;
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-26 15:10:06
* @LastEditTime: 2023-06-27 11:28:41
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -27,7 +27,7 @@
<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 v-for="(item, index) in navList[navName]" :key="index" @click="positionMarker(item)"
<div v-for="(item, index) in navList[navName]" :key="index" @click="handleNavMarker(item)"
style="margin-bottom: 1rem; font-size: 1.15rem;">
<van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
</div>
......@@ -77,7 +77,7 @@
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
@onLocation="infoWindowLocation"></InfoWindow>
<InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
:rect="rect"></InfoWindowLite>
:rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
<InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
:rect="rect"></InfoWindowWarn>
......@@ -324,8 +324,9 @@ export default {
},
label: {
content: coord.spotInfo[i].name,
position: 'BM',
offset: new AMap.Pixel(0, 10),
position: 'TM',
// position: 'BM',
// offset: new AMap.Pixel(0, 10),
minZoom: 18
}
}, {
......@@ -806,6 +807,7 @@ export default {
this.show_walk_route = true;
},
infoWindowLocation(position) { // 监听前往按钮回调
// TODO: 实际获取精确定位后导航到位置
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
......@@ -857,6 +859,13 @@ export default {
handleNavPopup() {
this.show_nav_popup = !this.show_nav_popup
},
handleNavMarker (item) { // 底部列表点击跳转弹框判断
if (item.window_type === 'normal') {
this.positionMarker(item)
} else {
this.positionLiteMarker(item)
}
},
positionMarker(item) {
// 点击后创建自定义信息窗口
this.setInfoWindows(item)
......