<style scoped>
  #map{
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #FFF;
  }
</style>
<template>
  <div id="map"></div>
</template>
<script>
  import {MP} from './map.js'
  import config from '@/config'
  var [BMap, map] = ''
  export default {
    name: 'BaiDu_Map',
    props: {
      zoom: { // 变焦
        type: Number,
        default: 12
      },
      coors: { // 坐标
        type: Array,
        default: []
      },
      place: {
        type: Number,
        default: 24
      }
    },
    mounted () {
//      this.create()
    },
    data () {
      return {
        ak: 'sFGGCnZu8HcewIdGMFGGaGypsfILG36G',
        BMap: '',
        imgUrl: config.root + '/static/img/icon_map.png'
      }
    },
    methods: {
      create () {
        MP(this.ak).then((Bmap) => {
          BMap = Bmap
          /* 显示地图 */
          map = new Bmap.Map('map')
          let lng = this.coors[0] !== undefined && this.coors[0].lng !== '' ? this.coors[0].lng : '118.77908'
          let lat = this.coors[0] !== undefined && this.coors[0].lat !== '' ? this.coors[0].lat : '31.981104'
          let point = new Bmap.Point(lng, lat)
          map.centerAndZoom(point, 12) // 渲染地图
          map.enableScrollWheelZoom(true) // 是否可以滚动
          map.addControl(new Bmap.NavigationControl())
          map.addControl(new Bmap.ScaleControl())
          map.addControl(new Bmap.OverviewMapControl())
          /* 创建批注 */
          if (Number(this.place) === 24) {
            for (let i in this.coors) {
              let points = new Bmap.Point(this.coors[i].lng, this.coors[i].lat)
              let marker = new Bmap.Marker(points)
              let label = new Bmap.Label(this.coors[i].name, {offset: new Bmap.Size(15, -16)})
              label.setStyle({
                color: '#FFF',
                fontSize: '12px',
                height: '20px',
                lineHeight: '20px',
                fontFamily: '微软雅黑',
                position: 'relative',
                padding: '5px 8px',
                border: '2px solid #fff',
                backgroundColor: 'green',
                borderRadius: '6px',
                letterSpacing: '2px'
              })
              map.addOverlay(marker)
              marker.setLabel(label)
            }
          }
          if (Number(this.place) === 135) {
            for (let i in this.coors) {
              let points = new Bmap.Point(this.coors[i].lng, this.coors[i].lat)
              let icon = new Bmap.Icon(this.imgUrl, new Bmap.Size(34, 42), {
                anchor: new BMap.Size(10, 30)
              })
              let marker = new Bmap.Marker(points, {icon: icon})
              let label = new Bmap.Label(Number(++i), {offset: new Bmap.Size(12, 8)})
              label.setStyle({
                color: '#FFF',
                fontSize: '12px',
                height: '20px',
                lineHeight: '20px',
                fontFamily: '微软雅黑',
                position: 'relative',
                border: 'none',
                backgroundColor: 'none',
                fontWeight: '700'
              })
              map.addOverlay(marker)
              marker.setLabel(label)
            }
            for (var i = 0; i < this.coors.length - 1; i++) {
              let startPoint = new Bmap.Point(this.coors[i].lng, this.coors[i].lat)
              let endPoint = new Bmap.Point(this.coors[i + 1].lng, this.coors[i + 1].lat)
              let polyline = new BMap.Polyline([startPoint, endPoint], {strokeColor: '#2e85fc', strokeWeight: 2, strokeOpacity: 1})  // 定义折线
              map.addOverlay(polyline)     // 添加折线到地图上
//              let startPoint = new Bmap.Point(this.coors[i].lng, this.coors[i].lat)
//              let endPoint = new Bmap.Point(this.coors[i + 1].lng, this.coors[i + 1].lat)
//              let walking = new Bmap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } })
//              walking.search(startPoint, endPoint)
//              /* 替换icon */
//              let icon = new Bmap.Icon('http://api0.map.bdimg.com/images/blank.gif', new Bmap.Size(18, 35))
//              walking.setMarkersSetCallback(function (result) {
//                result[0].marker.setIcon(icon)
//                result[1].marker.setIcon(icon)
//              })
            }
          }
        })
      },
      zoomIn (x, y) {
        let point = new BMap.Point(x, y)
        map.centerAndZoom(point, this.zoom)
      }
    },
    watch: {
      coors (val, old) {
        this.create()
      }
    }
  }
</script>
