|
@@ -9,14 +9,19 @@
|
|
|
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-polyline :path="path"
|
|
|
+ strokeColor='#4196fc'></el-amap-polyline>
|
|
|
+ <el-amap-text v-for="text in texts"
|
|
|
+ :text="text.text"
|
|
|
+ :position="text.position"></el-amap-text>
|
|
|
</el-amap>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -51,6 +56,10 @@ VueAMap.initAMapApiLoader({
|
|
|
})
|
|
|
let amapManager = new VueAMap.AMapManager();
|
|
|
import { getTeacherPersonalAttendance } from '@/api/buildTeam'
|
|
|
+const exampleComponents = {
|
|
|
+ props: ['text'],
|
|
|
+ template: `<div>text from parent: {{text}}</div>`
|
|
|
+}
|
|
|
export default {
|
|
|
props: ['activeRow'],
|
|
|
data () {
|
|
@@ -59,16 +68,25 @@ export default {
|
|
|
amapManager,
|
|
|
center: [114.34371, 30.55939],
|
|
|
markers: [],
|
|
|
- plugin: [],
|
|
|
distance: '-',
|
|
|
schoolLongitudeLatitude: null,
|
|
|
signInLongitudeLatitude: null,
|
|
|
+ markerEvents: {
|
|
|
+ complete: (o) => {
|
|
|
+ this.$refs.map.$amap.setFitView()
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ path: [],
|
|
|
+ texts: []
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
mounted () {
|
|
|
this.init()
|
|
|
},
|
|
|
+
|
|
|
activated () {
|
|
|
// this.init()
|
|
|
},
|
|
@@ -80,11 +98,13 @@ export default {
|
|
|
if (this.activeRow.schoolLongitudeLatitude) {
|
|
|
let add = {
|
|
|
title: '教学点',
|
|
|
- location: this.activeRow.schoolLongitudeLatitude.split(',')
|
|
|
+ location: this.activeRow.schoolLongitudeLatitude.split(','),
|
|
|
+ contentRender: (h, instance) => h(exampleComponents, { style: { backgroundColor: '#fff' }, props: { text: 'father is here' } }, ['xxxxxxx'])
|
|
|
}
|
|
|
this.center = this.activeRow.schoolLongitudeLatitude.split(',');
|
|
|
this.schoolLongitudeLatitude = this.activeRow.schoolLongitudeLatitude.split(',')
|
|
|
this.markers.push(add)
|
|
|
+
|
|
|
}
|
|
|
if (this.activeRow.signInLongitudeLatitude) {
|
|
|
let add = {
|
|
@@ -104,8 +124,10 @@ export default {
|
|
|
this.signInLongitudeLatitude = this.activeRow.signOutLongitudeLatitude.split(',')
|
|
|
this.markers.push(add)
|
|
|
}
|
|
|
- // this.$refs.map.$amap.setFitView(this.markers)
|
|
|
- console.log(this.$refs.map)
|
|
|
+ // if (this.$refs.map) {
|
|
|
+ // this.$refs.map.$amap.setFitView(this.markers)
|
|
|
+ // }
|
|
|
+
|
|
|
this.getDistance(this.signInLongitudeLatitude, this.schoolLongitudeLatitude)
|
|
|
|
|
|
return
|
|
@@ -160,7 +182,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;
|
|
|
}
|
|
|
|