<template>
  <view class="map">
    <map id="map_container" :latitude="latitude" :longitude="longitude" scale="11" :markers="markers"
      :polyline="polyline" :show-location="true" @markertap="markertap" @updated='mapUpdated' @tap='closeMapMarker'></map>
  </view>
</template>

<script>
import amap from "../../libs/amap-wx.130.js";

export default {
  data() {
    return {
      key: "c87827f15aec3e5d2c63cd41951d88c1",
      amapPlugin: null,
      latitude: 23.130061,
      longitude: 113.264499,
      mapInfo: [],
      markers: [
        {
          iconPath: "../../static/c1.png",
          id: 0,
          latitude: 39.989643,
          longitude: 116.481028,
          width: 23,
          height: 33
        },
        {
          iconPath: "../../static/c2.png",
          id: 0,
          latitude: 39.90816,
          longitude: 116.434446,
          width: 24,
          height: 34
        }
      ],
      distance: "",
      cost: "",
      polyline: []
    };
  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      key: this.key //该key 是在高德中申请的微信小程序key
    });

    this.amapPlugin.getRegeo({
      type: "gcj02", //map 组件使用的经纬度是国测局坐标， type 为 gcj02
      success: function(res) {
        console.log(res);
        const latitude = res[0].latitude;
        const longitude = res[0].longitude;
        this.longitude = longitude;
        this.latitude = latitude;
        this.mapInfo = res[0];
      },
      fail: res => {
        console.log(res);
      }
    });

    this.amapPlugin.getDrivingRoute({
      origin: "116.481028,39.989643",
      destination: "116.434446,39.90816",
      success: data => {
        console.log(data);
        const points = [];
        if (data.paths && data.paths[0] && data.paths[0].steps) {
          const steps = data.paths[0].steps;
          for (let i = 0; i < steps.length; i++) {
            const poLen = steps[i].polyline.split(";");
            for (let j = 0; j < poLen.length; j++) {
              points.push({
                longitude: parseFloat(poLen[j].split(",")[0]),
                latitude: parseFloat(poLen[j].split(",")[1])
              });
            }
          }
        }
        this.polyline = [
          {
            points,
            color: "#0091ff",
            width: 6
          }
        ];
        if (data.paths[0] && data.paths[0].distance) {
          this.distance = data.paths[0].distance + "米";
        }
        if (data.taxi_cost) {
          this.cost = "打车约" + parseInt(data.taxi_cost) + "元";
        }

        // 添加路线信息到 markers 数组中
        this.markers.push({
          id: 1,
          latitude: points[0].latitude,
          longitude: points[0].longitude,
          width: 23,
          height: 33,
          iconPath: "../../static/c1.png",
          type: "polyline",
          polyline: {
            points: points,
            color: "#0091ff",
            width: 6
          }
        });
        this.markers.push({
          id: 2,
          latitude: points[points.length - 1].latitude,
          longitude: points[points.length - 1].longitude,
          width: 23,
          height: 33,
          iconPath: "../../static/c2.png"
        });
      },
      fail: info => {
        // 失败处理
      }
    });
  },
  methods: {
    markertap() {},
    mapUpdated() {},
    closeMapMarker() {}
  }
};
</script>

<style lang="scss">
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#map_container {
  width: 100%;
  height: 100%;
}
</style>