Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7b8b636b 1 parent 45b20416

调整建筑导航功能

Inline Side-by-side
Showing 8 changed files with 293 additions and 157 deletions
/*
* @Date: 2023-07-10 16:14:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-18 16:33:08
* @LastEditTime: 2023-07-19 14:35:12
* @FilePath: /map-demo/src/common/members.js
* @Description: 文件描述
*/
......@@ -16,7 +16,7 @@ const testInfo = {
{
name: '义工',
position: [120.587721, 31.31423],
icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A5@2x.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A51%20@2x.png',
details: [
{
id: '0',
......
const testInfo = [
{
id: 0,
path: [
[120.587882, 31.312884],
[120.588164, 31.31305],
[120.587823, 31.313276],
[120.587811, 31.313508],
[120.5875, 31.31407],
[120.587103, 31.314234],
[120.586912, 31.314195],
[120.586812, 31.314049],
],
distance: '',
},
{
id: 1,
path: [
[120.587882, 31.312884],
[120.588164, 31.31305],
[120.587823, 31.313276],
[120.587811, 31.313508],
[120.5875, 31.31407],
[120.58769, 31.314535],
[120.587352, 31.314496],
[120.587176, 31.314839],
[120.587113, 31.314473],
[120.586966, 31.314526],
[120.58681, 31.314981],
[120.58653, 31.315118],
[120.586157, 31.315011],
],
distance: '',
},
{
id: 2,
path: [
[120.587882, 31.312884],
[120.588164, 31.31305],
[120.587823, 31.313276],
[120.587811, 31.313508],
[120.587985, 31.31411],
[120.58769, 31.314535],
[120.58798, 31.314679],
[120.58791, 31.314799],
[120.587295, 31.315548],
[120.587574, 31.315582],
[120.587853, 31.315603],
],
distance: '',
},
];
// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-鼓楼[120.5875,31.31407]-公共厕所[120.587103,31.314234]-包子铺[120.586912,31.314195]-开水房[120.586812,31.314049]；
// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-鼓楼[120.5875,31.31407]-天王殿[120.58769,31.314535]-素食馆[120.587352,31.314496]-罗汉堂[120.587176,31.314839]-集云轩[120.587113,31.314473]-般若堂[120.586966,31.314526]-茶室[120.58681,31.314981]-湖心亭[120.58653,31.315118]-神鼋[120.586157,31.315011]；
// 照壁[120.587882,31.312884]-双桥[120.588164,31.31305]-牌坊[120.587823,31.313276]-山门[120.587811,31.313508]-钟楼[120.587985,31.31411]-天王殿[120.58769,31.314535]-客堂、行政办公室[120.58798,31.314679]-观音殿[120.58791,31.314799]-大雄宝殿[,]-老念佛堂[120.587295,31.315548]-挂单寮[120.587574,31.315582]-地藏殿[120.587853,31.315603]；
export default testInfo;
/*
* @Date: 2023-07-10 16:14:10
* @Date: 2023-07-18 09:57:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-19 11:01:52
* @LastEditTime: 2023-07-19 14:57:03
* @FilePath: /map-demo/src/common/yard.js
* @Description: 文件描述
*/
......@@ -9,8 +9,8 @@ const testInfo = {
id: 'yard',
name: '场地',
icon: [
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B002@2x.png',
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B001@2x.png',
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B0021@2x.png',
'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B0011@2x.png',
],
list: [
{
......
......@@ -254,7 +254,7 @@ export default {
},
goToLocation () {
// this.$emit('onLocation', this.info.position)
this.$emit('onLocation', this.info.path)
this.$emit('onLocation', this.info.position)
}
}
}
......
......@@ -98,7 +98,7 @@ export default {
},
goToLocation() {
// this.$emit('onLocation', this.info.position)
this.$emit('onLocation', this.info.path)
this.$emit('onLocation', this.info.position)
}
}
}
......
......@@ -163,7 +163,9 @@ export default {
console.warn(this.yard_info);
},
goToOrder () {},
goToLocation () {},
goToLocation () {
this.$emit('onLocation', this.info.position)
},
onClose () {
window.devicePixelRatio = 1;
},
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-19 06:38:25
* @LastEditTime: 2023-07-19 16:32:10
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -40,6 +40,10 @@
<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 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;" />
</div> -->
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
style="vertical-align: middle;" />
......@@ -93,6 +97,7 @@
import coord from '@/common/map_data'
import map_max from '@/common/max'
import map_alert from '@/common/alert'
import my_router from '@/common/my_router'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
......@@ -196,7 +201,8 @@ export default {
dialog_text: '',
walk_route: '',
isActive: 0,
route_marker: [],
location_marker: '',
// route_marker: [],
route_safe_marker: [],
open_safe_route: true,
show_walk_route: true,
......@@ -234,7 +240,7 @@ export default {
async mounted() {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({i: code});
const { data } = await mapAPI({ i: code });
data.list = data.list.concat(map_alert);
this.navBarList = data.list; // 底部导航条
this.mapTiles = data.level; // 获取图层
......@@ -328,7 +334,7 @@ export default {
}, 100);
this.removeNavRoute();
},
loadMaker (id) {
loadMaker(id) {
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
this.markerSum = [];
......@@ -435,7 +441,7 @@ export default {
})
this.map.add(this.markerSum);
},
removeLayer () {
removeLayer() {
this.map.remove(this.markerSum);
},
// setMapBoundary() { // 地图描边
......@@ -569,10 +575,102 @@ export default {
this.map.remove([this.current_safe_route]); // 删除地图折线
this.map.remove(this.route_safe_marker); // 删除起始点标记
},
addNavRoute (path) { // 新增导航路径
// 生成折线地图路径
// addNavRoute (path) { // 新增导航路径
// // 生成折线地图路径
// this.current_route = new AMap.Polyline({
// path,
// isOutline: true,
// outlineColor: '#42a5f5',
// borderWeight: 1,
// strokeColor: '#42a5f5',
// strokeOpacity: 1,
// strokeWeight: 2,
// // 折线样式还支持 'dashed'
// strokeStyle: 'dashed',
// // strokeStyle是dashed时有效
// strokeDasharray: [10, 5],
// lineJoin: 'round',
// lineCap: 'round',
// zIndex: 50
// })
// this.map.add([this.current_route]);
// // 设置起始点标记
// var marker1 = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// marker1.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>终点</div>", //设置文本标注内容
// });
// var marker2 = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// marker2.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>起点</div>", //设置文本标注内容
// });
// // 新增逃生路线标记
// this.route_marker = [marker1, marker2]
// this.map.add(this.route_marker);
// // 关闭导航提示
// this.show_walk_route = false;
// },
addNavRoute(position) { // 新增导航路径
function arraysEqual(a, b) {
// 如果两个数组的长度不等，则它们不相等
if (a.length !== b.length) {
return false;
}
// 比较每个元素是否相等
return a.every(function (element, index) {
return element == b[index];
});
}
let array = []; // 导航点所在路径集合
my_router.forEach((route) => {
route.path.forEach((item) => {
if (arraysEqual(position, item)) {
array.push(route);
return false;
}
})
});
const lngLat = [120.587234, 31.314147]; // 左边
// const lngLat = [120.588178, 31.314396]; // 右边
// 构建路线结构
const route_obj = array;
// 计算距离最近的路径
route_obj.forEach((line) => {
line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.path);
});
let min = Math.min(...route_obj.map((line) => line.distance))
let result = route_obj.filter((line) => line.distance === min);
// 标记示例
this.current_route = new AMap.Polyline({
path,
path: result[0]['path'],
isOutline: true,
outlineColor: '#42a5f5',
borderWeight: 1,
......@@ -588,52 +686,27 @@ export default {
zIndex: 50
})
this.map.add([this.current_route]);
// 设置起始点标记
var marker1 = new AMap.Marker({
this.location_marker = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
this.map.add(this.route_marker);
this.map.add([this.location_marker]);
// 关闭导航提示
this.show_walk_route = false;
},
removeNavRoute() { // 移除地图路线
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
// this.map.remove(this.route_marker); // 删除起始点标记
this.map.remove(this.location_marker); // 删除当前定位标记
// 关闭导航提示
this.show_walk_route = true;
},
......@@ -768,15 +841,13 @@ export default {
// } else {
// this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
// }
// if (this.walk_route) { // 清除前一条步行导航
// this.walk_route.clear();
// }
// 测试
this.closeInfoWindow(); // 关闭弹框
// this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
if (this.current_route) { // 清除前一条步行导航
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
// this.map.remove(this.route_marker); // 删除起始点标记
this.map.remove(this.location_marker); // 删除当前定位标记
}
if (path.length) {
this.addNavRoute(path)
......@@ -797,7 +868,7 @@ export default {
handleNavPopup() {
this.show_nav_popup = !this.show_nav_popup
},
handleNavMarker (item) { // 底部列表点击跳转弹框判断
handleNavMarker(item) { // 底部列表点击跳转弹框判断
if (item.window_type === 'normal') {
this.positionMarker(item)
} else if (item.window_type === 'lite') {
......@@ -931,7 +1002,7 @@ export default {
});
}
},
onPlay (name) {
onPlay(name) {
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// _.each(coord.spotInfo, (x, i) => {
// var marker = new AMap.ElasticMarker({
......@@ -972,7 +1043,7 @@ export default {
// })
// this.map.add(this.spotInfo);
},
onPause (name) {},
onPause(name) { },
}
}
</script>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-19 11:23:33
* @LastEditTime: 2023-07-19 16:34:32
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
-->
......@@ -40,10 +40,6 @@
<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 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;" />
</div>
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
style="vertical-align: middle;" />
......@@ -88,7 +84,7 @@
<InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
:rect="rect"></InfoWindowWarn>
<InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
:rect="rect"></InfoWindowYard>
:rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard>
<!-- <audioBackground></audioBackground> -->
......@@ -99,13 +95,6 @@
{{ 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 title="姓名" :value="item.name" />
<van-cell title="手机号" :value="item.contact" />
<van-cell title="组别" :value="item.group" />
</van-cell-group> -->
<!-- end -->
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell">
<div class="van-cell__title"> <span>姓名</span> </div>
......@@ -131,6 +120,7 @@
import coord from '@/common/map_data'
import map_max from '@/common/max'
import map_yard from '@/common/yard'
import my_router from '@/common/my_router'
import map_members from '@/common/members'
import _ from 'lodash';
import $ from 'jquery';
......@@ -239,7 +229,8 @@ export default {
dialog_text: '',
walk_route: '',
isActive: 0,
route_marker: [],
location_marker: '',
// route_marker: [],
route_safe_marker: [],
open_safe_route: true,
show_walk_route: true,
......@@ -654,10 +645,102 @@ export default {
this.map.remove([this.current_safe_route]); // 删除地图折线
this.map.remove(this.route_safe_marker); // 删除起始点标记
},
addNavRoute (path) { // 新增导航路径
// 生成折线地图路径
// addNavRoute (path) { // 新增导航路径
// // 生成折线地图路径
// this.current_route = new AMap.Polyline({
// path,
// isOutline: true,
// outlineColor: '#42a5f5',
// borderWeight: 1,
// strokeColor: '#42a5f5',
// strokeOpacity: 1,
// strokeWeight: 2,
// // 折线样式还支持 'dashed'
// strokeStyle: 'dashed',
// // strokeStyle是dashed时有效
// strokeDasharray: [10, 5],
// lineJoin: 'round',
// lineCap: 'round',
// zIndex: 50
// })
// this.map.add([this.current_route]);
// // 设置起始点标记
// var marker1 = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// marker1.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>终点</div>", //设置文本标注内容
// });
// var marker2 = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// marker2.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>起点</div>", //设置文本标注内容
// });
// // 新增逃生路线标记
// this.route_marker = [marker1, marker2]
// this.map.add(this.route_marker);
// // 关闭导航提示
// this.show_walk_route = false;
// },
addNavRoute(position) { // 新增导航路径
function arraysEqual(a, b) {
// 如果两个数组的长度不等，则它们不相等
if (a.length !== b.length) {
return false;
}
// 比较每个元素是否相等
return a.every(function (element, index) {
return element == b[index];
});
}
let array = []; // 导航点所在路径集合
my_router.forEach((route) => {
route.path.forEach((item) => {
if (arraysEqual(position, item)) {
array.push(route);
return false;
}
})
});
const lngLat = [120.587234, 31.314147]; // 左边
// const lngLat = [120.588178, 31.314396]; // 右边
// 构建路线结构
const route_obj = array;
// 计算距离最近的路径
route_obj.forEach((line) => {
line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.path);
});
let min = Math.min(...route_obj.map((line) => line.distance))
let result = route_obj.filter((line) => line.distance === min);
// 标记示例
this.current_route = new AMap.Polyline({
path,
path: result[0]['path'],
isOutline: true,
outlineColor: '#42a5f5',
borderWeight: 1,
......@@ -673,52 +756,27 @@ export default {
zIndex: 50
})
this.map.add([this.current_route]);
// 设置起始点标记
var marker1 = new AMap.Marker({
this.location_marker = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8Fz@2x.png',
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
this.map.add(this.route_marker);
this.map.add([this.location_marker]);
// 关闭导航提示
this.show_walk_route = false;
},
removeNavRoute() { // 移除地图路线
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
// this.map.remove(this.route_marker); // 删除起始点标记
this.map.remove(this.location_marker); // 删除当前定位标记
// 关闭导航提示
this.show_walk_route = true;
},
......@@ -861,7 +919,8 @@ export default {
// this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
if (this.current_route) { // 清除前一条步行导航
this.map.remove([this.current_route]); // 删除地图折线
this.map.remove(this.route_marker); // 删除起始点标记
// this.map.remove(this.route_marker); // 删除起始点标记
this.map.remove(this.location_marker); // 删除当前定位标记
}
if (path.length) {
this.addNavRoute(path)
......@@ -1110,59 +1169,6 @@ export default {
// this.map.add(this.spotInfo);
},
onPause (name) {},
selectRoute () { // 选择最近路线
// 获取实际定位
// const currentLngLat = [this.current_lng, this.current_lat];
// console.warn(currentLngLat);
const lngLat = [120.587234, 31.314147]; // 左边
// const lngLat = [120.588178, 31.314396]; // 右边
// 构建路线结构
const route_obj = [{
route: [[120.587728, 31.313561], [120.587479, 31.313545], [120.587449, 31.313643], [120.587436, 31.313763], [120.587417, 31.313884], [120.587398, 31.314015], [120.587382, 31.314175], [120.587371, 31.314292], [120.587703, 31.314378]],
distance: '',
}, {
route: [[120.587832, 31.313471], [120.588062, 31.313498], [120.588218, 31.313551], [120.588213, 31.313721], [120.588172, 31.31403], [120.588164, 31.314245], [120.588103, 31.314392], [120.587875, 31.314381], [120.587703, 31.314378]],
distance: '',
}];
// 计算距离最近的路径
route_obj.forEach((line) => {
line.distance = AMap.GeometryUtil.distanceToLine(lngLat, line.route);
});
let min = Math.min(...route_obj.map((line) => line.distance))
let result = route_obj.filter((line) => line.distance === min);
// 标记示例
const current_route = new AMap.Polyline({
path: result[0]['route'],
isOutline: true,
outlineColor: '#42a5f5',
borderWeight: 1,
strokeColor: '#42a5f5',
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: 'dashed',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50
})
this.map.add([current_route]);
var marker = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
this.map.add([marker]);
},
}
}
</script>
......