<template>
  <div class="mapinfo">
    <div class="demo-input-suffix">
      <span>经度：</span>
      <el-input class="lineinput" style="width:200px" size="mini" v-model.number="locData.longitude"></el-input>
      <span>纬度：</span>
      <el-input class="lineinput" style="width:200px" size="mini" v-model.number="locData.latitude"></el-input>
    </div>
    <baidu-map class="mapbaidu" :center="center" :zoom="zoom" @ready="handler"
               :scroll-wheel-zoom="true"
               @click="clickEvent"
               ak="WTL4mFuWgrje9iBRtMuB9vao5PYd8dyK">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"
                      @locationSuccess="getLoctionSuccess"></bm-geolocation>
      <bm-view :style="{width:'100%',height: this.clientHeight+'px',flex: 1,marginBottom:'-30px'}"></bm-view>
    </baidu-map>
  </div>
</template>

<script>

import { BaiduMap, BmNavigation, BmView, BmGeolocation, BmCityList } from 'vue-baidu-map'
import icon from '../assets/marker-icon.png'

export default {
  name: 'mapDialog',
  components: {
    BaiduMap,
    BmNavigation,
    BmView,
    BmGeolocation,
    BmCityList
  },
  data () {
    return {
      center: {
        lng: 121.833138,
        lat: 39.081725
      },
      zoom: 12,
      mapVisible: false,
      locData: {
        longitude: '',
        latitude: '',
        address: '',
      },
      clientHeight: 200, // 屏幕高度
      iconUrl: icon
    }
  },
  methods: {
    handler ({
      BMap,
      map
    }) {
      let _this = this
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function (r) {
        console.log(r)
        _this.center = {
          lng: r.longitude,
          lat: r.latitude
        }       // 设置center属性值
        _this.autoLocationPoint = {
          lng: r.longitude,
          lat: r.latitude
        }       // 自定义覆盖物
        _this.initLocation = true
      }, { enableHighAccuracy: true })

      window.map = map
    },
    //点击地图监听
    clickEvent (e) {
      map.clearOverlays()
      let Icon_0 = new BMap.Icon(icon, new BMap.Size(25, 41), {
        anchor: new BMap.Size(18, 32),
        imageSize: new BMap.Size(25, 41)
      })
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), { icon: Icon_0 })
      map.addOverlay(myMarker)
      var point = new BMap.Point(e.point.lng, e.point.lat)
      var gc = new BMap.Geocoder()
      let _this = this
      gc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents
        _this.locData.address = rs.address
      })
      this.locData.longitude = e.point.lng
      this.locData.latitude = e.point.lat
    },
    //定位成功回调
    getLoctionSuccess (point, AddressComponent, marker) {
      map.clearOverlays()
      let Icon_0 = new BMap.Icon('icon/map_marker_check.png', new BMap.Size(64, 64), {
        anchor: new BMap.Size(18, 32),
        imageSize: new BMap.Size(36, 36)
      })
      var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat), { icon: Icon_0 })
      map.addOverlay(myMarker)
      this.locData.longitude = point.point.lng
      this.locData.latitude = point.point.lat
    },
    findlocation () {
      this.$emit('findlocdata', this.locData)
      this.mapVisible = false
    },
    mapShow () {
      this.mapVisible = true
    },
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.mapinfo {
  width: 500px;
  height: 100%;
  position: relative;
}

.mapbaidu {
  width: 500px;
  height: 100%;
  position: relative;
}

.demo-input-suffix {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  span {
    color: #fff;
  }

}
</style>