dy-admin-manager/src/views/teamDetail/componentCourse/gpsLocation.vue

<template>
  <div>
    <!-- <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"
             :center="center"
             :events="markerEvents"
             class="amap-demo">
      <!--  :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> 
<script>
import VueAMap from 'vue-amap'
// 地图
(function () {
  let func = EventTarget.prototype.addEventListener;
  let supportsPassive = false
  try {
    let opts = Object.defineProperty({}, 'passive', {
      get: function () {
        supportsPassive = true;
      }
    })
    document.addEventListener("testPassive", null, opts);
    document.removeEventListener('testPassive', null, opts);
  } catch (e) { }

  EventTarget.prototype.addEventListener = function (type, fn, capture) {
    this.func = func;
    capture = capture instanceof Object ? capture : {};
    capture.passive = supportsPassive;
    this.func(type, fn, capture);
  };
}());
// Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'b1e6ac2eb28902ce91a490edf194e000',
  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: ['activeRow'],
  data () {
    return {
      zoom: 20,
      amapManager,
      center: [114.34371, 30.55939],
      markers: [],
      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()
  },
  methods: {
    // 地点搜索
    // searchOption () { },
    // 重置
    init () {
      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 (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.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) {

      if (sigin && sigin.length > 0 && school && school.length > 0) {
        let o = amapManager.getMap();
        let marker1 = new AMap.Marker({
          position: sigin
        });
        let marker2 = new AMap.Marker({
          position: school
        });

        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;
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
}
.amap-demo {
  height: 500px;
}
</style>