|
@@ -1,21 +1,33 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <p class="title">打卡地相距教学点{{distance}}米</p>
|
|
|
<!-- <el-amap-search-box class="search-box"
|
|
|
value="searchValue"
|
|
|
:search-option="searchOption"
|
|
|
:on-search-result="onSearchResult"></el-amap-search-box> -->
|
|
|
<el-amap :zoom="zoom"
|
|
|
+ ref='map'
|
|
|
vid="amapDemo"
|
|
|
:amap-manager="amapManager"
|
|
|
- :plugin="plugin"
|
|
|
:center="center"
|
|
|
+ :events="markerEvents"
|
|
|
class="amap-demo">
|
|
|
- <!-- :events="markerEvents()" -->
|
|
|
+ <!-- :plugin="plugin" -->
|
|
|
<el-amap-marker v-for="(marker, index) in markers"
|
|
|
:key="index"
|
|
|
:position="marker.location"
|
|
|
:title="marker.title"></el-amap-marker>
|
|
|
+ <el-amap-text v-for="(marker,index) in markers"
|
|
|
+ :key="index+'xxx'"
|
|
|
+ :text="marker.title"
|
|
|
+ :position="marker.location"
|
|
|
+ :offset="[40,-10]"></el-amap-text>
|
|
|
+ <el-amap-polyline :path="path"
|
|
|
+ strokeColor='#4196fc'></el-amap-polyline>
|
|
|
+ <el-amap-text v-for="(text,index) in texts"
|
|
|
+ :key="index+'ooo'"
|
|
|
+ :text="text.text"
|
|
|
+ :position="text.position"
|
|
|
+ :offset="[-50,0]"></el-amap-text>
|
|
|
</el-amap>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -45,38 +57,45 @@ import VueAMap from 'vue-amap'
|
|
|
// Vue.use(VueAMap)
|
|
|
VueAMap.initAMapApiLoader({
|
|
|
key: 'b1e6ac2eb28902ce91a490edf194e000',
|
|
|
- plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
|
|
|
- v: '1.4.4'
|
|
|
+ plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],
|
|
|
+ v: '1.4.4',
|
|
|
})
|
|
|
let amapManager = new VueAMap.AMapManager();
|
|
|
import { getTeacherPersonalAttendance } from '@/api/buildTeam'
|
|
|
+
|
|
|
export default {
|
|
|
- props: ['courseScheduleId'],
|
|
|
+ props: ['activeRow'],
|
|
|
data () {
|
|
|
return {
|
|
|
zoom: 20,
|
|
|
amapManager,
|
|
|
center: [114.34371, 30.55939],
|
|
|
- // events: {
|
|
|
- // init (o) {
|
|
|
- // let marker = new AMap.Marker({
|
|
|
- // position: [114.34371, 30.55939]
|
|
|
- // });
|
|
|
-
|
|
|
- // marker.setMap(o);
|
|
|
- // }
|
|
|
- // },
|
|
|
markers: [],
|
|
|
- plugin: [],
|
|
|
distance: '-',
|
|
|
schoolLongitudeLatitude: null,
|
|
|
signInLongitudeLatitude: null,
|
|
|
+ markerEvents: {
|
|
|
+ complete: (o) => {
|
|
|
+ this.$refs.map.$amap.setFitView()
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ path: [],
|
|
|
+ texts: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ activeRow (val) {
|
|
|
+ if (val) {
|
|
|
+ console.log(val)
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
this.init()
|
|
|
},
|
|
|
+
|
|
|
activated () {
|
|
|
// this.init()
|
|
|
},
|
|
@@ -85,40 +104,40 @@ export default {
|
|
|
// searchOption () { },
|
|
|
// 重置
|
|
|
init () {
|
|
|
- getTeacherPersonalAttendance({ courseScheduleId: this.courseScheduleId }).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- if (res.data && res.data.signInLongitudeLatitude) {
|
|
|
- let add = {
|
|
|
- title: '签到点',
|
|
|
- location: res.data.signInLongitudeLatitude.split(',')
|
|
|
- }
|
|
|
- this.center = res.data.signInLongitudeLatitude.split(',');
|
|
|
- this.signInLongitudeLatitude = res.data.signInLongitudeLatitude.split(',')
|
|
|
- this.markers.push(add)
|
|
|
- }
|
|
|
- if (res.data && res.data.signOutLongitudeLatitude) {
|
|
|
- let add = {
|
|
|
- title: '签退点',
|
|
|
- location: res.data.signOutLongitudeLatitude.split(',')
|
|
|
- }
|
|
|
- this.center = res.data.signOutLongitudeLatitude.split(',');
|
|
|
- this.signOutLongitudeLatitude = res.data.signOutLongitudeLatitude.split(',')
|
|
|
- this.markers.push(add)
|
|
|
- }
|
|
|
+ if (this.activeRow.schoolLongitudeLatitude) {
|
|
|
+ let add = {
|
|
|
+ title: '教学点',
|
|
|
+ location: this.activeRow.schoolLongitudeLatitude.split(','),
|
|
|
+ }
|
|
|
+ this.center = this.activeRow.schoolLongitudeLatitude.split(',');
|
|
|
+ this.schoolLongitudeLatitude = this.activeRow.schoolLongitudeLatitude.split(',')
|
|
|
+ this.markers.push(add)
|
|
|
|
|
|
- if (res.data && res.data.schoolLongitudeLatitude) {
|
|
|
- let add = {
|
|
|
- title: '教学点',
|
|
|
- location: res.data.schoolLongitudeLatitude.split(',')
|
|
|
- }
|
|
|
- this.schoolLongitudeLatitude = res.data.schoolLongitudeLatitude.split(',')
|
|
|
- this.center = res.data.schoolLongitudeLatitude.split(',');
|
|
|
- this.markers.push(add)
|
|
|
- }
|
|
|
- this.getDistance(this.signInLongitudeLatitude, this.schoolLongitudeLatitude)
|
|
|
+ }
|
|
|
+ if (this.activeRow.signInLongitudeLatitude) {
|
|
|
+ let add = {
|
|
|
+ title: '签到点',
|
|
|
+ location: this.activeRow.signInLongitudeLatitude.split(',')
|
|
|
+ }
|
|
|
+ this.center = this.activeRow.signInLongitudeLatitude.split(',');
|
|
|
+ this.signInLongitudeLatitude = this.activeRow.signInLongitudeLatitude.split(',')
|
|
|
+ this.markers.push(add)
|
|
|
+ }
|
|
|
+ if (this.activeRow.signOutLongitudeLatitude) {
|
|
|
+ let add = {
|
|
|
+ title: '签退点',
|
|
|
+ location: this.activeRow.signOutLongitudeLatitude.split(',')
|
|
|
}
|
|
|
- })
|
|
|
- // this.getDistance()
|
|
|
+ this.center = this.activeRow.signOutLongitudeLatitude.split(',');
|
|
|
+ this.signOutLongitudeLatitude = this.activeRow.signOutLongitudeLatitude.split(',')
|
|
|
+ this.markers.push(add)
|
|
|
+ }
|
|
|
+ // if (this.$refs.map) {
|
|
|
+ // this.$refs.map.$amap.setFitView(this.markers)
|
|
|
+ // }
|
|
|
+
|
|
|
+ this.getDistance(this.signInLongitudeLatitude, this.schoolLongitudeLatitude)
|
|
|
+ this.getDistance(this.signOutLongitudeLatitude, this.schoolLongitudeLatitude)
|
|
|
},
|
|
|
onSearchResult () { },
|
|
|
getDistance (sigin, school) {
|
|
@@ -134,7 +153,13 @@ export default {
|
|
|
|
|
|
let p1 = marker1.getPosition();
|
|
|
let p2 = marker2.getPosition();
|
|
|
+ var textPos = p1.divideBy(2).add(p2.divideBy(2));
|
|
|
+ console.log(textPos)
|
|
|
+ let position = [textPos.lng, textPos.lat]
|
|
|
var distance = Math.round(p1.distance(p2));
|
|
|
+
|
|
|
+ this.path.push(sigin, school)
|
|
|
+ this.texts.push({ text: `两点相距${distance}米`, position })
|
|
|
this.distance = distance;
|
|
|
}
|
|
|
|
|
@@ -148,6 +173,6 @@ export default {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.amap-demo {
|
|
|
- height: 300px;
|
|
|
+ height: 500px;
|
|
|
}
|
|
|
</style>
|