Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d0851587 1 parent 35b4437c

新增头部导航和下拉，infowindow组件化

Inline Side-by-side
Showing 4 changed files with 217 additions and 145 deletions
......@@ -9,6 +9,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCol: typeof import('vant/es')['Col']
......
......@@ -2,8 +2,8 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-19 15:52:36
* @FilePath: /tswj/src/App.vue
* @LastEditTime: 2023-05-30 17:23:26
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
<template>
......@@ -64,6 +64,7 @@ html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
......
<template>
<div>
<div class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
{{ title }}
<div id="del-div">
<div type="primary" icon="el-icon-close" @click="close()">123</div>
</div>
<div style="text-align: center;">
<button type="primary">主要按钮</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
infoWindow: {
type: Object,
default: () => { }
},
title: {
type: String,
default: ''
}
},
methods: {
// 关闭
close() {
// 高德地图信息窗关闭的api
this.infoWindow.close()
},
edit() {
console.log('编辑按钮测试')
},
del() {
console.log('删除按钮测试')
}
}
}
</script>
<style lang="less" scoped>
#del-div {
position: absolute;
right: 20;
top: 20;
transform: scale(1.2);
}
</style>
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-30 13:45:04
* @LastEditTime: 2023-05-30 18:09:09
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div style="height: 100vh; position: relative;">
<div style="height: 100vh; position: relative; overflow: hidden;">
<div id="container"></div>
<div class="nav-bar-wrapper">
<van-row>
<van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)">
<div id="abc" class="nav-bar-wrapper">
<div class="hideScrollBar"
style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 0 ? 'checked' : '', 'item']"
@click="setNavLayer(0)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">景区信息</span>
</van-col>
<van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)">
</div>
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 1 ? 'checked' : '', 'item']"
@click="setNavLayer(1)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">卫生间</span>
</van-col>
<van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)">
</div>
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
@click="setNavLayer(2)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">活动中心</span>
</div>
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
@click="setNavLayer(2)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">活动中心</span>
</van-col>
</van-row>
</div>
<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" />
</div>
</div>
</div>
<van-popup v-model:show="show_nav_popup" position="top" duration="0" :overlay="false"
:style="{ padding: '1rem', top: '4.5rem' }">
<div style="text-align: left;">
<div @click="positionMarker" style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;三宝楼</div>
<div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;法云堂</div>
<div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;罗汉堂</div>
<div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;大雄宝殿</div>
</div>
</van-popup>
</div>
<div class="safe-route-wrapper">
<span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
......@@ -52,7 +79,7 @@
</div>
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
<van-icon name="cross" @click="show_popup = false" style="float: right; color: gray;" />
<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 }}
......@@ -61,14 +88,17 @@
</div>
<video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
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>
:src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
</div>
</van-popup>
<van-dialog v-model:show="dialog_show" title="温馨提示">
<div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
</van-dialog>
<!-- 自定义组件InfoWindow，初始时需要隐藏 -->
<!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle"></InfoWindow>
</div>
</template>
......@@ -79,6 +109,8 @@ import coord from '@/common/tiantan_v2'
// import AMap from 'AMap'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
import InfoWindow from '@/components/InfoWindow'
const GPS = {
PI: 3.14159265358979324,
......@@ -137,7 +169,7 @@ const GPS = {
};
export default {
// components: { Flexbox, FlexboxItem },
components: { InfoWindow },
data() {
return {
map: '',
......@@ -183,7 +215,11 @@ export default {
show_walk_route: true,
popup_title: '',
popup_content: '',
video_src: ''
video_src: '',
show_nav_popup: false,
showInfoWindow: false,
infoWindow: {},
infoWindowTitle: '',
}
},
mounted() {
......@@ -293,104 +329,49 @@ export default {
]
});
},
layerMap1() {
// 图层地图
this.imageLayer = new AMap.ImageLayer({
// url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
// url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
url: 'images/xys1.png',
bounds: new AMap.Bounds(
[120.585202, 31.312918], [120.588828, 31.316511] // 对象西南角经纬度和东北角经纬度值
// [116.327911, 39.939229],
// [116.342659, 39.946275] // 对象西南角经纬度和东北角经纬度值
),
opacity: 1, // 图层透明度，默认为 1
zooms: [2, 20],
zIndex: 6 // 图层的层级，默认为 6
});
this.map = new AMap.Map('container', {
viewMode: '3D', // 设置地图模式
turboMode: false,
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
showBuildingBlock: false, // 是否展示地图 3D 楼块
zoom: 18, // 设置地图显示的缩放级别
zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
showLabel: false, // 是否展示地图文字和 POI 信息
pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
center: [120.587237, 31.314805], // 设置地图中心点坐标
forceVector: false,
rotateEnable: false,
resizeEnable: true, //是否监控地图容器尺寸变化
layers: [
new AMap.TileLayer.RoadNet(),
this.imageLayer,
]
});
},
layerMap2() {
// 图层地图
this.imageLayer = new AMap.ImageLayer({
url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
bounds: new AMap.Bounds(
[116.327911, 39.939229],
[116.342659, 39.946275]
),
zooms: [15, 20]
});
this.map = new AMap.Map('container', {
center: [120.587237, 31.314805],
zoom: 15,
layers: [
AMap.createDefaultLayer(),
// this.imageLayer,
]
});
},
loadPublicEquipment() { // 加载公共设备图标
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.sheshi, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.sheshi[i].position,
zooms: [14, 20],
styles: [{
icon: {
img: coord.sheshi[i].icon,
size: [16, 16], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
}
}],
zoomStyleMapping
});
let infoWindowContent =
'<div className="custom-infowindow input-card">' +
'<label style="color:grey">公共厕所</label>' +
// 为 infowindow 添加自定义事件
'<div id="lnglat2container" class="btn">我要走过去</div>' +
'</div>';
// 创建一个自定义内容的 infowindow 实例
let infoWindow = new AMap.InfoWindow({
position: coord.sheshi[i].position,
offset: new AMap.Pixel(0, -30),
content: infoWindowContent
});
if (clickListener) {
infoWindow.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
infoWindow.open(this.map);
})
//
this.facilities.push(marker);
})
this.map.add(this.facilities);
},
// loadPublicEquipment() { // 加载公共设备图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// _.each(coord.sheshi, (x, i) => {
// var marker = new AMap.ElasticMarker({
// position: coord.sheshi[i].position,
// zooms: [14, 20],
// styles: [{
// icon: {
// img: coord.sheshi[i].icon,
// size: [16, 16], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 1.4, // 最大放大比例
// minScale: 0.8 // 最小放大比例
// }
// }],
// zoomStyleMapping
// });
// let infoWindowContent =
// '<div className="custom-infowindow input-card">' +
// '<label style="color:grey">公共厕所</label>' +
// // 为 infowindow 添加自定义事件
// '<div id="lnglat2container" class="btn">我要走过去</div>' +
// '</div>';
// // 创建一个自定义内容的 infowindow 实例
// let infoWindow = new AMap.InfoWindow({
// position: coord.sheshi[i].position,
// offset: new AMap.Pixel(0, -30),
// content: infoWindowContent
// });
// if (clickListener) {
// infoWindow.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
// })
// //
// this.facilities.push(marker);
// })
// this.map.add(this.facilities);
// },
loadScenicSpot() { // 加载景点图标
var spots = [];
var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
......@@ -442,29 +423,29 @@ export default {
})
this.map.add(spots);
},
loadPlant() { // 加载植物图标
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
var trees = new AMap.ElasticMarker({
position: [116.410908, 39.88057],
zooms: [15.5, 20],
styles: [{
icon: {
img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
size: [366, 201],
anchor: 'center',
imageSize: [865, 1156],
imageOffset: [-44, -480],
fitZoom: 17.5,
scaleFactor: 2,
maxScale: 2,
minScale: 0.125
}
}],
zoomStyleMapping
});
// loadPlant() { // 加载植物图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// var trees = new AMap.ElasticMarker({
// position: [116.410908, 39.88057],
// zooms: [15.5, 20],
// styles: [{
// icon: {
// img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
// size: [366, 201],
// anchor: 'center',
// imageSize: [865, 1156],
// imageOffset: [-44, -480],
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// }
// }],
// zoomStyleMapping
// });
this.map.add(trees);
},
// this.map.add(trees);
// },
loadSpotMaker() { // 加载景点标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.spotInfo, (x, i) => {
......@@ -636,18 +617,16 @@ export default {
},
addLayer() {
this.layerMap();
// this.layerMap1();
// this.layerMap2();
this.loadPublicEquipment();
// this.loadPublicEquipment();
this.loadScenicSpot();
this.loadPlant();
// this.loadPlant();
this.setMapBoundary();
},
removeLayer() {
this.initMap();
this.loadPublicEquipment();
// this.loadPublicEquipment();
this.loadScenicSpot();
this.loadPlant();
// this.loadPlant();
this.setMapBoundary();
},
setLocation() { // 开启定位服务
......@@ -891,7 +870,37 @@ export default {
this.removeSafeRoute()
this.open_safe_route = true;
}
},
handleNavPopup() {
this.show_nav_popup = !this.show_nav_popup
},
positionMarker() {
// this.setInfoWindow([120.587519, 31.315924])
// 点击后创建自定义信息窗口
this.setInfoWindows('title', 'content', [120.587519, 31.315924])
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
//
this.show_nav_popup = false;
},
setInfoWindows(title, content, position) {
// 此时需要把组件的样式设置为可见
this.showInfoWindow = true
// 设置marker头部的标题信息窗口
const infoWindow = new AMap.InfoWindow({
// 使用自定义窗体
isCustom: true,
// 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
content: this.$refs['infoWindow'].$el,
// 设置定位偏移量
offset: new AMap.Pixel(0, -30),
})
this.infoWindow = infoWindow;
this.infoWindowTitle = 'xxxx'
// 信息窗口打开
infoWindow.open(this.map, position)
}
}
}
</script>
......@@ -954,7 +963,7 @@ export default {
top: 0;
left: 0;
right: 0;
height: 3.5rem;
height: 4.5rem;
background-color: white;
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
......@@ -1011,4 +1020,14 @@ export default {
.content {}
}
.hideScrollBar::-webkit-scrollbar {
display: none;
}
.hideScrollBar {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
</style>
......