<template>
  <div>
    <div id="container" style="width:100%;height:50vh" />
  </div>

</template>

<script>
export default {
  name: "index",
  data () {
    return {
      latitude: null,
      longitude: null,
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.getPosition);
    } else {
      console.log('浏览器不支持Geolocation API');
    }
  },

  methods: {
    getPosition(position) {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      console.log(`当前位置的经度为：${this.longitude}，纬度为：${this.latitude}`);
    },
    // 初始化地图
    initMap (datas) {
      var that = this
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 窗口大小调整
        center: datas[1], // 中心
        zoom: 5
      })
      // 添加maker
      this.marker = new AMap.Marker({
        map: this.map,
        position: datas[1],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13), // 调整图片偏移
        autoRotation: true, // 自动旋转
        angle: -90 // 图片旋转角度
      })
      that.initroad(datas)
    },
    // 初始化轨迹
    initroad (datas) {
      // 绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: datas,
        showDir: true,
        strokeColor: '#77DDFF', // 线颜色--浅蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round' // 折线拐点的绘制样式
      })
      // 绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#00BBFF', // 线颜色-深蓝色
        path: datas
        ,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      this.map.setFitView() // 合适的视口
    }
  }
}

</script>

<style scoped>

</style>
