forked from qiushanhe/dm-manage-web
提交
This commit is contained in:
232
src/views/zs/clue/ClueForm/components/PlaceMap.vue
Normal file
232
src/views/zs/clue/ClueForm/components/PlaceMap.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template >
|
||||
<div>
|
||||
<el-form>
|
||||
<el-form-item label="显示场地">
|
||||
<el-radio-group v-model="mapPlaceType" @change="createMarkersInMap">
|
||||
<el-radio :label="0">自营场地</el-radio>
|
||||
<el-radio :label="1">全部场地</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div id="map" style="height: 600px; width: 100%;"></div>
|
||||
<el-collapse class="box-card">
|
||||
<el-collapse-item title="附近驾校">
|
||||
<div style="padding: 10px">
|
||||
<div slot="header">附近驾校</div>
|
||||
<div v-if="nearbySchoolSearching">正在搜索中...</div>
|
||||
<template v-else>
|
||||
<div v-for="p in nearbySchoolList" :key="p.index">
|
||||
<div class="hover-pointer" style="font-size: 14px; color: blue" @click="getClassType(p)">
|
||||
<i v-if="p.recommend" class="el-icon-star-off" />
|
||||
驾校: {{ p.deptName }}-{{ p.name }}
|
||||
</div>
|
||||
<div class="mt5">地址：{{ p.address }}</div>
|
||||
<div class="mt5">
|
||||
直线距离: {{ p.distance }} 公里;
|
||||
<span class="ml0">步行距离：{{ p.walkdistance }}</span>
|
||||
</div>
|
||||
<el-divider style="margin: 6px 0 !important;" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<ClassTypeDialog v-if="classVisible" ref="classTypeDialog" :dialog-visible="classVisible" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMap from 'AMap';
|
||||
import ClassTypeDialog from './ClassTypeDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'PlaceMap',
|
||||
components: {
|
||||
ClassTypeDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mapPlaceType: 0,
|
||||
nearbySchoolSearching: true,
|
||||
nearbySchoolList: [],
|
||||
amap: null,
|
||||
locationMarker: null,
|
||||
geocoder: null,
|
||||
placeList: [],
|
||||
classVisible: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log("placemap----beforeDestroy")
|
||||
this.geocoder = null;
|
||||
this.locationMarker = null;
|
||||
this.amap && this.amap.clearMap();
|
||||
this.amap && this.amap.destroy();
|
||||
this.amap = null;
|
||||
},
|
||||
methods: {
|
||||
// 初始化地图
|
||||
initMap() {
|
||||
if (!this.amap) {
|
||||
this.amap = new AMap.Map('map', {
|
||||
zoom: 12,
|
||||
center: [117.226095, 31.814372],
|
||||
resizeEnable: true
|
||||
});
|
||||
// 地图坐标点定位
|
||||
|
||||
// this.getAllPlaces();
|
||||
|
||||
// this.createMarkersInMap()
|
||||
}
|
||||
},
|
||||
setMapCenter(info) {
|
||||
if (info.lat && info.lng) {
|
||||
this.locationMarker && this.amap.remove(this.locationMarker);
|
||||
this.locationMarker = new AMap.Marker({
|
||||
position: [info.lng, info.lat],
|
||||
icon: require(`@/assets/images/place/flag_red.png`)
|
||||
});
|
||||
this.amap.add(this.locationMarker);
|
||||
this.amap.setCenter([info.lng, info.lat]);
|
||||
this.amap.setZoom(14);
|
||||
|
||||
this.getNearbySchool(info);
|
||||
}
|
||||
},
|
||||
//获取附近驾校
|
||||
getNearbySchool(info) {
|
||||
if (info.lng && info.lat) {
|
||||
this.nearbySchoolList = [];
|
||||
this.nearbySchoolSearching = true;
|
||||
// 推荐的场地
|
||||
let places1 = [];
|
||||
// 普通的场地
|
||||
let places2 = [];
|
||||
|
||||
const p2 = [info.lng, info.lat];
|
||||
for (let i = 0; i < this.placeList.length; i++) {
|
||||
const element = this.placeList[i];
|
||||
const p1 = [element.lng, element.lat];
|
||||
// 计算直线距离
|
||||
element.distance = (window.AMap.GeometryUtil.distance(p1, p2) / 1000).toFixed(2);
|
||||
element.recommend ? places1.push(element) : places2.push(element);
|
||||
}
|
||||
// 按直线距离排序
|
||||
// 排序
|
||||
if (places1.length > 1) {
|
||||
places1 = places1.sort((a, b) => a.distance - b.distance);
|
||||
}
|
||||
// 排序
|
||||
if (places2.length > 1) {
|
||||
places2 = places2.sort((a, b) => a.distance - b.distance);
|
||||
}
|
||||
// 取普通场地和推荐场地，组合, 取四个
|
||||
this.nearbySchoolList = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
places1.length > i && this.nearbySchoolList.push(places1[i]);
|
||||
places2.length > i && this.nearbySchoolList.push(places2[i]);
|
||||
if (this.nearbySchoolList.length === 4) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 计算步行距离
|
||||
this.nearbySchoolList.map(async (item) => {
|
||||
const p1 = [item.lng, item.lat];
|
||||
const resp = await this.getWalkingDistance(p1, p2);
|
||||
item.walkdistance = resp;
|
||||
this.$forceUpdate();
|
||||
});
|
||||
this.nearbySchoolSearching = false;
|
||||
}
|
||||
},
|
||||
// 获取两点之间的步行距离
|
||||
async getWalkingDistance(start, end) {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.AMap.plugin('AMap.Walking', () => {
|
||||
const walking = new AMap.Walking();
|
||||
let num = 0;
|
||||
walking.search(start, end, (status, result) => {
|
||||
if (status === 'complete') {
|
||||
result.routes.forEach((item) => {
|
||||
num += item.distance;
|
||||
});
|
||||
resolve(
|
||||
num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`
|
||||
);
|
||||
} else {
|
||||
resolve('步行数据无法确定');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
handleMarkers(places) {
|
||||
this.placeList = places;
|
||||
this.createMarkersInMap();
|
||||
},
|
||||
//创建地图点标记
|
||||
createMarkersInMap() {
|
||||
let arr = this.placeList;
|
||||
if (this.mapPlaceType === 0) {
|
||||
arr = arr.filter((item) => item.recommend);
|
||||
}
|
||||
this.amap && this.amap.clearMap();
|
||||
this.locationMarker && this.amap.add(this.locationMarker);
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const element = arr[i];
|
||||
const tmpMarker = new AMap.Marker({
|
||||
map: this.amap,
|
||||
position: [element.lng, element.lat],
|
||||
label: {
|
||||
content: element.name,
|
||||
direction: 'left'
|
||||
},
|
||||
icon: require(`@/assets/images/place/position_${element.flagColor}.png`),
|
||||
extData: element,
|
||||
clickable: true
|
||||
});
|
||||
tmpMarker.on('click', (ev) => this.getClassType(ev.target.getExtData()));
|
||||
}
|
||||
},
|
||||
// 查询该场地下的班型报价
|
||||
getClassType(item) {
|
||||
console.log(item)
|
||||
// this.classType = [];
|
||||
// getClassTypes({
|
||||
// schoolId: item.deptId,
|
||||
// placeId: item.placeId,
|
||||
// status: '0'
|
||||
// }).then((resp) => {
|
||||
// if (resp && resp.code === 200 && resp.data) {
|
||||
// this.classType = resp.data;
|
||||
// this.innerVisible = true;
|
||||
// }
|
||||
// });
|
||||
this.classVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.classTypeDialog.init(item);
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.box-card {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 45px;
|
||||
width: 400px;
|
||||
}
|
||||
::v-deep .el-divider--horizontal {
|
||||
margin: 6px 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user