<style scoped>
  #map{
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #FFF;
  }
</style>
<template>
  <div id="map"></div>
</template>
<script>
  import {MP, MPL} from './map.js'
  var [BMap, BMapLib, map] = ''
  export default {
    name: 'BaiDu_Map',
    props: {
      zoom: { // 变焦
        type: Number,
        default: 12
      },
      coor: { // 坐标
        type: Array,
        default: []
      },
      types: {
        type: Number,
        default: 1
      }
    },
    mounted () {
    },
    data () {
      return {
        ak: 'sFGGCnZu8HcewIdGMFGGaGypsfILG36G',
        BMap: ''
      }
    },
    methods: {
      /* 初始化数据 */
      init (map) {
        let point = null
        let markers = []
        for (let i = 0; i < this.coor.length; i++) {
          point = new BMap.Point(this.coor[i].lng, this.coor[i].lat)
          markers.push(new BMap.Marker(point))
        }
        let mark = new BMapLib.MarkerClusterer(map, {markers: markers})
        console.log('这个不能删', mark)
      },
//      /* 创建地图 */
      create (x, y) {
        let _this = this
        MP(this.ak).then((Bmap) => {
          BMap = Bmap
          _this.BMap = Bmap
          map = new Bmap.Map('map')
          let point = new Bmap.Point(x, y)
          map.centerAndZoom(point, this.zoom) // 渲染地图
          map.enableScrollWheelZoom(true) // 是否可以滚动
          map.addControl(new Bmap.NavigationControl())
          map.addControl(new Bmap.ScaleControl())
          map.addControl(new Bmap.OverviewMapControl())
          if (Number(_this.types) === 1) {
            _this.init(map)
          } else if (Number(_this.types) === 2) {
            _this.addMarker(map)
            _this.showMap()
          }
          map.addEventListener('tilesloaded', () => {
            this.$message('地图加载完毕')
          })
        })
      },
      showMap () {
        for (var i = 0; i < this.coor.length - 1; i++) {
          let startPoint = new BMap.Point(this.coor[i].lng, this.coor[i].lat)
          let endPoint = new BMap.Point(this.coor[i + 1].lng, this.coor[i + 1].lat)
          this.showPath(startPoint, endPoint)
        }
      },
//      /* 规划线路 */
      showPath (startPoint, EndPoint) {
        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)
        })
      },
//      /* 创建标准 */
      addMarker (map) {
        for (let i = 0; i < this.coor.length; i++) {
          let point = new BMap.Point(this.coor[i].lng, this.coor[i].lat)
          var marker = new BMap.Marker(point)
          map.addOverlay(marker)
          var label = new BMap.Label(i + 1, {offset: new BMap.Size(5, 3)})
          label.setStyle({ color: '#fff', fontSize: '12px', border: 'none', backgroundColor: 'none' })
          marker.setLabel(label)
        }
      },
//      addDrivingLabel () {
//        let point = null
//        for (let i = 0; i < this.coor.length; i++) {
//          point = new BMap.Point(this.coor[i].lng, this.coor[i].lat)
//          var marker = new BMap.Marker(point)
//          map.addOverlay(marker)
//          var label = new BMap.Label(i + 1, {offset: new BMap.Size(5, 3)})
//          label.setStyle({ color: '#fff', fontSize: '12px', border: 'none', backgroundColor: 'none' })
//          marker.setLabel(label)
//        }
//        /* 绘画起点、重点 */
//        let walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } })
//        walking.search(new BMap.Point('118.779054', '31.980698'), new BMap.Point('118.773188', '31.98118'))
//        walking.setSearchCompleteCallback(function (rs) {
//          var pts = walking.getResults().getPlan(0).getRoute(0).getPath()
//          map.addOverlay(new BMap.Polyline(pts, { strokeColor: 'red', strokeWeight: 6, strokeOpacity: 0.5 }))
//        })
//
//        /* 路过地方 */
//        let first = this.coor[0]
//        let end = this.coor[this.coor.length - 1]
//        console.log(first, end, this.after)
//        var polyline = new BMap.Polyline(this.after, { strokeColor: 'red', strokeWeight: 6, strokeOpacity: 0.5 })
//        map.addOverlay(polyline)
//      },
//      addDriving (map) {
//        let polylines = []
//        for (let i in this.coor) {
//          let poly = new BMap.Point(this.coor[i].lng, this.coor[i].lat)
//          polylines.push(poly)
//        }
//        var polyline = new BMap.Polyline(polylines, {strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5})  // 定义折线
//        map.addOverlay(polyline)
//      },
      /* 定位方法 */
      location (callback) {
        let _this = this
        MP(this.ak).then((Bmap) => {
          BMap = Bmap
          _this.$nextTick(() => {
            MPL().then(bmaplib => {
              BMapLib = bmaplib
              let Geolocation = new BMap.Geolocation()
              Geolocation.getCurrentPosition(function (r) {
                if (Number(this.getStatus()) === 0) {
                  if (typeof callback === 'function') {
                    callback(r.point.lng, r.point.lat)
                  }
                } else if (Number(_this.getStatus()) === 2 || Number(_this.getStatus()) === 3 || Number(_this.getStatus()) === 7 || Number(_this.getStatus()) === 8) {
                  callback('Fail')
                }
              }, {enableHighAccuracy: true})
            })
          })
        })
      },
      zoomIn (x, y) {
        let point = new BMap.Point(x, y)
        map.centerAndZoom(point, this.zoom)
//        map.zoomIn()
//        map.zoomIn()
      }
    },
    watch: {
      coor (val, oldv) {
        if (Number(this.types) === 2) {
          if (val[0] !== undefined && val[0].lng && val[0].lat) {
            this.create(this.coor[0].lng, this.coor[0].lat)
          }
        } else if (Number(this.types) === 1) {
          this.location((lng, lat) => {
            if (lng === 'Fail') {
              this.create(118.77807441, 32.0572355)
            } else {
              this.create(lng, lat)
            }
          })
        }
      }
    }
  }
</script>

