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

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
  		securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
	}
  var map = {};      // 最好在data外声明要不然地图会一卡一卡
  var markers = [];  // 最好在data外声明要不然地图会一卡一卡
export default {
  name: 'MapXian',
   components: {},
   props:['message','edit','sendMap'],
    watch: {
       // 监听父组件传递的值
       edit(newValue, oldValue) {
            console.log(newValue, oldValue)
            if(newValue == false){
              this.newValue =true
            }
       }
     },
  data() {
    return {
      auto: null,
      map: null,
      newValue:false,
  mapData:{  longitude: 104.113368, // 经纬度
          latitude: 30.518559,   // 经纬度
          },
    }
  },
  methods: {
    initMap() {
      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('container2', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [this.message.longitude ||104.113368 ,this.message.latitude || 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() {
      this.map.remove(markers);
        let marker;
        // 创建一个 Marker 实例：
       if (this.newValue === false) {
         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.message.longitude || 104.113368 , this.message.latitude || 30.518559),
         });
       } else {
         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),
         });
       }
        // 将创建的点标记添加到已有的地实例：
        markers.push(marker);
        this.map.add(marker);
        this.map.setFitView();
  },
 //点击获取经纬度
 latitude() {
   this.map.on('click',(ev)=> {
    if(this.newValue){
      // 触发事件的地理坐标，AMap.LngLat 类型
       let lnglat = ev.lnglat;
       // 触发事件的像素坐标，AMap.Pixel 类型
       let pixel = ev.pixel;
       // 触发事件类型
       let type = ev.type;
      this.mapData.longitude = lnglat.lng
       this.mapData.latitude = lnglat.lat
       this.markPoints()
       console.log(lnglat)
      this.sendMap(this.mapData)
    }
   });
 },
 destroyMap() {
          if (this.map) {
            this.map.destroy();
            this.map = null;
          }
      }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  beforeDestroy() {
    this.destroyMap();
  }
}
</script>

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

</style>

