<template>
  <div style="width: 100%; height: 100vh">
    <div class="searchBox">
      <input type="text" id="search" placeholder="输入关键字选取地点" autocomplete="off" />
    </div>
    <div id="container" class="map" tabindex="0"></div>
    <div id="footer">
      <div class="addressBox">
        <span id="address">{{ address }}</span>
      </div>
      <div class="btnOk" id="postMessageAdds" @click="getweizhi">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      mapInfo: {
        latitude: 0,
        longitude: 0,
        address: ''
      },
      address: ''
    }
  },
  mounted() {
    var center = ''

    const map = new AMap.Map('container', {
      zoom: 17,
      resizeEnable: true,
      rotateEnable: true,
      pitchEnable: true,
      pitch: 80,
      rotation: -15,
      // viewMode: '3D', //开启3D视图,默认为关闭
      buildingAnimation: true, //楼块出现是否带动画
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      expandZoomRange: true,
      zooms: [3, 20]
    })

    //地图开始
    AMap.plugin('AMap.Geolocation', () => {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：无穷大
        convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, //显示定位按钮，默认：true
        showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        offset: [15, 150], //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        position: 'LB' //定位按钮停靠位置，默认：'LB'，左下角
      })
      map.addControl(geolocation)
      geolocation.getCurrentPosition((status, result) => {
        if (status == 'complete') {
          this.mapInfo.longitude = result.position.lng
          this.mapInfo.latitude = result.position.lat
          this.mapInfo.address = result.formattedAddress
          if (center != '') {
            map.setCenter(center)
          } else {
            map.setCenter([result.position.lng, result.position.lat])
          }
          this.address = result.formattedAddress
        } else {
          if (center != '') {
            map.setCenter(center)
          }
          console.log('失败原因排查信息:' + result.message)
        }
      })
    })

    AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
      var positionPicker = new PositionPicker({
        mode: 'dragMap', //dragMap：拖拽地图，dragMarker：拖拽点
        map: map
      })
      positionPicker.on('success', positionResult => {
        this.mapInfo = {
          latitude: positionResult.position.lat,
          longitude: positionResult.position.lng,
          address: positionResult.regeocode.formattedAddress
        }
        this.address = positionResult.address
      })
      positionPicker.on('fail', positionResult => {
        this.address = ''
      })
      positionPicker.start()
    })

    AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => {
      const poiPicker = new PoiPicker({
        input: 'search'
      })
      //初始化poiPicker
      poiPicker.on('poiPicked', poiResult => {
        const item = poiResult.item
        this.mapInfo = {
          latitude: item.location.lat,
          longitude: item.location.lng,
          address: item.district + ' ' + item.name + ' ' + item.address
        }
        map.setCenter([item.location.lng, item.location.lat])
        document.getElementById('search').value = ''
      })
    })
  },
  methods: {
    getweizhi() {
      AMap.plugin(['AMap.Geocoder'], () => {
        var geocoder = new AMap.Geocoder()
        geocoder.getAddress([this.mapInfo.longitude, this.mapInfo.latitude], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              // 具体地址
              this.mapInfo.address = result.regeocode.formattedAddress
              // 省
              this.mapInfo.province = result.regeocode.addressComponent.province
              // 市
              this.mapInfo.city = result.regeocode.addressComponent.city
              if (this.mapInfo.city == '') this.mapInfo.city = this.mapInfo.province
              // 区
              this.mapInfo.district = result.regeocode.addressComponent.district
              console.log(this.mapInfo)
            }
          } else {
            alert('获取省市区失败，请重新选择地址')
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.map {
  height: 100%;
  width: 100%;
  float: left;
}

#right {
  display: none;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #cccccc;
  z-index: 9999;
  padding: 10px 20px;
  box-sizing: border-box;
}

.addressBox {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  font-size: 16px;
  margin: 10px 0 15px;
}

.btnOk {
  line-height: 44px;
  text-align: center;
  background: #0091ff;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}

.searchBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  height: auto;
  padding: 10px 20px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0);
}

#search {
  width: 100%;
  height: 38px;
  border-radius: 20px;
  border: 1px solid #ccc;
  outline: none;
  background: rgba(255, 255, 255, 0.5);
  padding-left: 10px;
  box-sizing: border-box;
}

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