<template>
  <!-- 高德地图汽车路线规划 demo -->
  <div id="container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: '1091cb7a90c725e6873bb88e37c54f5d' // 高德地图 安全密钥 一定要添加，否则很多功能无法实现
}
export default {
  props: ['dId', 'oId', 'origin_ip', 'destination_ip'],
  data() {
    return {
      inputObject: {
        userInput: '',
        inputId: 'search'
      },
      map: null,
      autoOptions: {
        input: ''
      },
      auto: null,
      autoOptions2: {
        input: ''
      },
      auto2: null,
      o_ip: '',
      e_ip: ''
    }
  },
  mounted() {
    this.initMap()
    this.autoOptions.input = this.oId
    this.autoOptions2.input = this.dId
    this.o_ip = this.origin_ip
    this.e_ip = this.destination_ip
  },
  methods: {
    initMap(o, d) {
      AMapLoader.load({
        key: 'b036e144859ed142fb696276e16d22c4', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.PolyEditor',
          'AMap.CircleEditor',
          'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0'
        }
      }).then((AMap) => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          zooms: [2, 22],
          center: [104.066541, 30.572269] // 初始化地图中心点位置
          // terrain:true
        })

        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.MapType())

        // 路线规划
        const driving = new AMap.Driving({
          policy: AMap.DrivingPolicy.LEAST_TIME, // 选择路线策略
          map: this.map // 指定渲染地图
        })
        var startLngLat = [104.064328, 30.573457]
        var endLngLat = [121.489612, 31.405457]

        driving.search(startLngLat, endLngLat, (status, result) => {
          console.log(status)
          console.log(result)
        })
        this.map.plugin(['AMap.AutoComplete'], () => {
          this.auto = new AMap.AutoComplete(this.autoOptions) // 高德地图搜索功能组件
          this.auto2 = new AMap.AutoComplete(this.autoOptions2) // 高德地图搜索功能组件
          console.log(this.auto)
          console.log(this.auto2)
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 500px;
  }
</style>
