import { Component, OnInit ,Renderer2,ElementRef } from '@angular/core';
declare var AMap: any;
@Component({
  selector: 'app-gis-labeling',
  templateUrl: './gis-labeling.component.html',
  styleUrls: ['./gis-labeling.component.scss']
})
export class GisLabelingComponent implements OnInit {

  constructor(private  elementRef: ElementRef,public renderer2: Renderer2) { }
  map:any //地图
  ngOnInit(): void {
    
    setTimeout(() => {
      this.map = new AMap.Map('map');
      //给地图增加点击事件
      this.map.on('click', (ev)=>{
        // 触发事件的对象
        var target = ev.target;
        
        // 触发事件的地理坐标，AMap.LngLat 类型
        var lnglat = ev.lnglat;
        
        // 触发事件的像素坐标，AMap.Pixel 类型
        var pixel = ev.pixel;
        
        // 触发事件类型
        var type = ev.type;

        let marker = new AMap.Marker({
          position:[lnglat.lng, lnglat.lat]//位置
        })
        // marker.content = '我是第' + (i + 1) + '个Marker';  
        marker.setMap(this.map)

        AMap.event.addListener(marker, 'click',  () => {
          infoWindow.open(this.map, marker.getPosition());
          console.log(222,marker)
          setTimeout(() => {
            this.renderer2.listen(this.elementRef.nativeElement.querySelector('#lnglat2container'),'click',(event)=>{
              console.log(111)
            })
          }, 0);
          
        });

      });

      var infoWindowContent =
        '<div className="custom-infowindow input-card">' +
            '<label style="color:grey">故宫博物院</label>' +
            '<div class="input-item">' +
                '<div class="input-item-prepend">' +
                    '<span class="input-item-text" >经纬度</span>' +
                '</div>' +
                '<input id="lnglat" type="text" />' +
            '</div>' +
            '<input id="lnglat2container" type="button" class="btn" value="获取该位置经纬度"/>' +
        '</div>';
      var infoWindow = new AMap.InfoWindow({
        content: infoWindowContent,
        offset: new AMap.Pixel(0, -45)
      });

      // var xxx  =  this.el.nativeElement.querySelector('#lnglat2container')
      let yyy = document.getElementById('lnglat2container');
  
    }, 0);  
  }

  getLngLat(){
    console.log(123)
  }
}