Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
18a23b55 1 parent a398fe2a

反馈调整

Inline Side-by-side
Showing 3 changed files with 133 additions and 130 deletions
// var sheshi = [
// {
// name: '停车场',
// position: [116.418563, 39.883041],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/停车场.png',
// },
// {
// name: '洗手间',
// position: [116.415419, 39.883125],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '洗手间',
// position: [116.410226, 39.88364],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '洗手间',
// position: [116.412247, 39.887258],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '洗手间',
// position: [116.412701, 39.874841],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '售票处',
// position: [116.412442, 39.887925],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',
// },
// {
// name: '售票处',
// position: [116.413039, 39.874522],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',
// },
// ];
// var touristSpots = [
// {
// name: '祈年殿',
// position: [116.412866, 39.88365],
// zIndex: 300,
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
// size: [128, 160],
// anchor: 'bottom-center',
// minZoom: 19,
// },
// {
// name: '西天门',
// position: [116.405562, 39.881166],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men.png',
// size: [146, 144],
// anchor: 'bottom-center',
// minZoom: 18,
// },
// {
// name: '北天门',
// position: [116.412745, 39.885776],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
// size: [185, 94],
// anchor: 'bottom-center',
// minZoom: 17,
// },
// {
// name: '百花园',
// position: [116.40783, 39.88212],
// zIndex: 200,
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/盆景02.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men3.png',
// size: [210, 98],
// anchor: 'bottom-center',
// minZoom: 16,
// },
// {
// name: '万寿亭',
// position: [116.406792, 39.8837],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
// size: [128, 168],
// anchor: 'bottom-center',
// minZoom: 15,
// },
// {
// name: '圜丘',
// position: [116.413219, 39.876967],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men4.png',
// size: [148, 137],
// anchor: 'bottom-center',
// minZoom: 15,
// },
// {
// name: '东天门',
// position: [116.417604, 39.881557],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
// size: [185, 94],
// anchor: 'bottom-center',
// minZoom: 15,
// },
// ];
var spotInfo = [
{
name: '照壁',
......@@ -158,6 +52,11 @@ var spotInfo = [
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.587944, 31.313359],
[120.58804, 31.313229],
[120.587845, 31.313176],
],
},
{
name: '山门殿',
......@@ -172,6 +71,10 @@ var spotInfo = [
],
// zoom: { 17: 1, 18: 1, 19: 1, 20: 0 },
window_type: 'normal',
path: [
[120.587698, 31.313342],
[120.58794, 31.313358],
],
},
{
name: '钟楼',
......@@ -185,6 +88,11 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.587874, 31.31401],
[120.58774, 31.31401],
[120.58781, 31.313449],
],
},
{
name: '鼓楼',
......@@ -198,6 +106,11 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.587517, 31.313986],
[120.587743, 31.313999],
[120.587818, 31.313453],
],
},
{
name: '天王殿',
......@@ -222,6 +135,10 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.5877, 31.314391],
[120.587812, 31.313437],
],
},
{
name: '大雄宝殿',
......@@ -250,6 +167,12 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.587644, 31.314826],
[120.587652, 31.314771],
[120.587705, 31.314363],
[120.587815, 31.313442],
],
},
{
name: '罗汉堂',
......@@ -283,6 +206,12 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.587182, 31.314786],
[120.587464, 31.314773],
[120.587652, 31.314764],
[120.587818, 31.313451],
],
},
{
name: '观音殿',
......@@ -297,6 +226,12 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.58788, 31.31466],
[120.58789, 31.314594],
[120.587686, 31.314482],
[120.587815, 31.313439],
],
},
{
name: '藏经楼',
......@@ -310,6 +245,7 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [],
},
{
name: '西花园湖心亭',
......@@ -323,6 +259,15 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.586531, 31.314978],
[120.586811, 31.314982],
[120.587297, 31.314951],
[120.587339, 31.314938],
[120.587352, 31.314823],
[120.58765, 31.314773],
[120.587811, 31.313439],
],
},
{
name: '四百岁神龟',
......@@ -336,6 +281,16 @@ var spotInfo = [
},
],
window_type: 'normal',
path: [
[120.586154,31.314984],
[120.586531, 31.314978],
[120.586811, 31.314982],
[120.587297, 31.314951],
[120.587339, 31.314938],
[120.587352, 31.314823],
[120.58765, 31.314773],
[120.587811, 31.313439],
],
},
];
......@@ -352,6 +307,11 @@ var toiletInfo = [
},
],
window_type: 'lite',
path: [
[120.587109, 31.314146],
[120.587733, 31.31418],
[120.587811, 31.313453],
],
},
];
......@@ -384,6 +344,11 @@ var activityInfo = [
},
],
window_type: 'lite',
path: [
[120.587482, 31.314518],
[120.587677, 31.314555],
[120.587809, 31.31348],
],
},
{
name: '包子铺',
......@@ -397,6 +362,11 @@ var activityInfo = [
},
],
window_type: 'lite',
path: [
[120.586928, 31.314122],
[120.58773, 31.31418],
[120.587805, 31.313467],
],
},
{
name: '开水房',
......@@ -410,6 +380,11 @@ var activityInfo = [
},
],
window_type: 'lite',
path: [
[120.586928, 31.314122],
[120.58773, 31.31418],
[120.587805, 31.313467],
],
},
{
name: '茶室',
......@@ -423,6 +398,13 @@ var activityInfo = [
},
],
window_type: 'lite',
path: [
[120.58692, 31.314924],
[120.587333, 31.314947],
[120.587355, 31.314812],
[120.587642, 31.314775],
[120.587808, 31.313462],
],
},
];
......@@ -439,6 +421,10 @@ const publicInfo = [
},
],
window_type: 'lite',
path: [
[120.587701, 31.313342],
[120.587935, 31.313367],
],
},
{
name: '东门',
......@@ -452,6 +438,11 @@ const publicInfo = [
},
],
window_type: 'lite',
path: [
[120.588198, 31.314374],
[120.587712, 31.31431],
[120.587801, 31.313455],
],
},
];
......
......@@ -28,16 +28,16 @@
</div>
</div>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
<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.5rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
<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="goToLocation()" style="width: 50%; 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>
<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>
......@@ -264,14 +264,16 @@ export default {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
text-align: left;
border-radius: 5px;
padding: 1.5rem 1.25rem;
padding: 1rem 1.25rem;
overflow: auto;
.info-text {
width: 100%;
// width: 100%;
line-height: 1.5;
float: left;
color: #7A6C6C;
font-size: 0.9rem;
padding: 0.5rem 0;
}
.info-text-audio {
width: 80%;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-28 14:13:45
* @LastEditTime: 2023-06-28 15:43:08
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -72,7 +72,7 @@
</van-popup>
<van-dialog v-model:show="dialog_show" title="温馨提示">
<div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
<div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
</van-dialog>
<!-- 自定义组件InfoWindow，初始时需要隐藏 -->
......@@ -193,6 +193,7 @@ export default {
warnInfo: [], // 预警信息实体
show_popup: false,
dialog_show: false,
dialog_text: '',
xys_lng: 120.587334,
xys_lat: 31.314823,
walk_route: '',
......@@ -297,7 +298,7 @@ export default {
rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
center: [120.587382, 31.313900], // 设置地图中心点坐标
forceVector: false,
rotateEnable: false,
// rotateEnable: true,
layers: [
// new AMap.TileLayer.RoadNet(),
],
......@@ -308,6 +309,8 @@ export default {
this.map.on("click", this.showInfoClick);
//
this.setSpotLayer()
//
this.map.setRotation(6, true)
},
loadSpotMaker() { // 加载景点标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......@@ -530,6 +533,7 @@ export default {
// 判断是否在范围内
if (!this.isPointInRing()) {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
}
}
},
......@@ -634,13 +638,13 @@ export default {
this.current_route = new AMap.Polyline({
path,
isOutline: true,
outlineColor: '#7F7F7F',
outlineColor: '#42a5f5',
borderWeight: 1,
strokeColor: '#7F7F7F',
strokeColor: '#42a5f5',
strokeOpacity: 1,
strokeWeight: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: 'solid',
strokeStyle: 'dashed',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
......@@ -665,7 +669,7 @@ export default {
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
content: "<div class='info'>终点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
......@@ -683,7 +687,7 @@ export default {
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
content: "<div class='info'>起点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
......@@ -835,16 +839,16 @@ export default {
this.map.setLimitBounds(myBounds);
},
showInfoClick(e) {
console.log(e);
// console.log(e);
var zoom = this.map.getZoom(); //获取当前地图级别
var text =
"您在 [ " +
"您在 [" +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ] 的位置单击了地图！当前层级" +
"] 的位置单击了地图！当前层级" +
zoom;
console.warn(text);
console.log(text);
// 点击空白处 关闭弹框
this.closeInfoWindow();
// 关闭弹出底部导航弹框
......@@ -892,7 +896,12 @@ export default {
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
}
this.addNavRoute(path)
if (path.length) {
this.addNavRoute(path)
} else {
this.dialog_show = true;
this.dialog_text = '内部设施';
}
},
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
......@@ -922,6 +931,7 @@ export default {
this.map.setZoom(18);
this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
}, 100);
this.removeNavRoute()
},
handleSafeRoute(status) { // 打开/关闭逃生路线线
if (status) {
......