<template>
  <div>
    <div id="container">
      <el-input
        placeholder="请输入地点名"
        class="input"
        @input="inputSearch"
        id="tipinput"
        v-model="input"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        class="btn"
        size="small"
        @click="search"
        >搜索</el-button
      >
      <el-button class="btnEvent1" @click="clickOn">绑定事件</el-button>
      <el-button class="btnEvent2" @click="clickOff">解除事件</el-button>
      <el-button class="btnEvent3" @click="removeMarkers">删除标点</el-button>
    </div>
  </div>
</template>
<script>
// import AMap from 'vue-amap'
export default {
  data() {
    return {
      map: '',
      markers: [],
      positions: [],
      tipinput: '',
      placeSearch: '',
      input: '',
    }
  },
  mounted() {
    setTimeout(() => {
      this.mapInit()
      this.setLoacation()
    }, 1000)
  },
  methods: {
    mapInit() {
      //初始化地图对象，加载地图
      let map = new AMap.Map('container', {
        zoom: 11,
        resizeEnable: true,
        // pitch: 75,
        // viewMode:'3D'
      })
      this.map = map
    },
    showInfoClick(e) {
      if (this.markers) {
        this.map.remove(this.markers)
      }
      let icon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
          '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3),
      })
      let marker = new AMap.Marker({
        icon: icon,
        position: [e.lnglat.getLng(), e.lnglat.getLat()],
        offset: new AMap.Pixel(-13, -30),
      })
      this.markers = marker
      this.positions = [e.lnglat.getLng(), e.lnglat.getLat()]
      marker.setTitle('我是marker的title')
      marker.setMap(this.map)
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.markers)
    },
    // 事件绑定
    clickOn() {
      //   console.log(this.map)
      //   log.success('绑定事件!')
      this.map.on('click', this.showInfoClick)
      this.map.setDefaultCursor('pointer')
      //   this.map.on('dblclick', showInfoDbClick)
      //   this.map.on('mousemove', showInfoMove)
    },
    // 解绑事件
    clickOff() {
      //   log.success('解除事件绑定!')
      this.map.off('click', this.showInfoClick)
      this.map.setDefaultCursor('default')
      //   map.off('dblclick', showInfoDbClick)
      //   map.off('mousemove', showInfoMove)
    },
    removeMarkers() {
      this.map.remove(this.markers)
    },
    inputSearch() {
      let autoOptions = {
        input: 'tipinput',
      }
      let auto = new AMap.Autocomplete(autoOptions)
      let placeSearch = new AMap.PlaceSearch({
        map: this.map,
      }) //构造地点查询类
      AMap.event.addListener(auto, 'select', this.select) //注册监听，当选中某条记录时会触发
      this.placeSearch = placeSearch
    },
    select(e) {
      this.map.clearMap()
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name) //关键字查询查询
    },
    search() {
      this.map.clearMap()
      this.placeSearch.search(this.input)
    },
    //定位当前位置
    setLoacation() {
      AMap.plugin('Amap.Geolocation', function () {
        let geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB',
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete',onComplete)
        AMap.event.addListener(geolocation, 'error',onError)
      })
    },
    //获取位置成功的地理位置信息
    onComplete(data) {
      console.log(data, 'success')
    },
    //获取地理位置失败的信息
    onError(data) {
      console.log(data, 'error')
    },
  },
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
.el-card__header {
  margin: 0;
}
.input {
  position: absolute;
  z-index: 999;
  width: 300px;
  left: 30px;
  top: 10px;
}
.btn {
  position: absolute;
  z-index: 999;
  left: 335px;
  top: 10px;
}
.btnEvent1 {
  position: absolute;
  z-index: 999;
  top: 50px;
  left: 20px;
}
.btnEvent2 {
  position: absolute;
  z-index: 999;
  top: 50px;
  left: 110px;
}
.btnEvent3 {
  position: absolute;
  z-index: 999;
  top: 50px;
  left: 200px;
}
</style>