<template>
  <div id="container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  		securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
}
var map = {}; // 最好在data外声明要不然地图会一卡一卡
var markers = []; // 最好在data外声明要不然地图会一卡一卡
export default {
  components: {},
  props: ['sendChildDate'],
  data () {
    return {
      auto: null,
      map: null,
      markers: [],
      mapData: { longitude: 104.113368, // 经纬度
        latitude: 30.518559, // 经纬度
      },
    }
  },
  mounted () {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  beforeDestroy () {
    this.destroyMap();
  },
  methods: {
    initMap () {
      console.log(AMapLoader.load);
      AMapLoader.load({
        key: '438a727f8ff61d71f33694f386c108c3', // 申请好的Web端开发者Key，首次调用 load 时必填
        terrain: true,
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
            center: [104.113368, 30.518559] // 初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.Geolocation())
          this.markPoints()
          this.latitude()
        })
        .catch(e => {
          console.log(e)
        })
    },
    markPoints () {
      // 创建一个 Marker 实例：
      const marker = new AMap.Marker({
        icon: new AMap.Icon({
          // size: new AMap.Size(19, 32),
          // anchor:new AMap.Pixel(20, 30),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 默认图标的URL
        }),
        position: new AMap.LngLat(this.mapData.longitude, this.mapData.latitude), // 经纬度对象，也可                                        以是经纬度构成的一维数组[lng, lat]
      });
      markers.push(marker)
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(marker);
      this.map.setFitView();
    },
    // 点击获取经纬度
    latitude () {
      this.map.on('click', (ev) => {
        // console.log(ev)

        this.map.remove(markers);
        // 触发事件的地理坐标，AMap.LngLat 类型
        const lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        const pixel = ev.pixel;
        // 触发事件类型
        const type = ev.type;
        this.mapData.longitude = lnglat.lng
        this.mapData.latitude = lnglat.lat
        this.markPoints()
        // console.log(lnglat, pixel, type)
        this.sendChildDate(this.mapData)
      });
    },
    destroyMap () {
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
    }
  }
}
</script>

<style lang="less">
#container {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
.amap-icon{
  img {
     width:19px;
     height:30px;
   }
}

</style>

