|
|
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) |
|
|
} |
|
|
}
|
|
|
|
