我希望标记始终位于地图中心,并且地图可拖动(但标记保留在屏幕中心)。使用当前的实现,我能够得到结果,但是一个问题是,标记在拖动地图时首先移动,但是一旦停止拖动,标记就会再次居中。
在我的组件中,我按如下方式使用angular2-google-maps
:
<agm-map (idle)="mapIdle()" (centerChange)="updateLatLong($event)" [latitude]="lat" [longitude]="lng" #agmMap [mapDraggable]="true" [fullscreenControl]="true" [streetViewControl]="false">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
在上述组件打字稿文件中,函数定义如下:
getAddress(lat: number, lng: number) {
if (navigator.geolocation) {
const geocoder = new google.maps.Geocoder();
const latlng = new google.maps.LatLng(lat, lng);
const request = { location: latlng };
geocoder.geocode(request, (results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const result = results[0];
if (result != null) {
// Process Address
}
}
});
}
}
public handleAddressChange(address: Address) {
this.lng = address.geometry.location.lng();
this.lat = address.geometry.location.lat();
this.getAddress(this.lat, this.lng);
}
updateLatLong(data: google.maps.LatLngLiteral) {
this.tempLat = data.lat;
this.tempLong = data.lng;
this.getAddress(data.lat, data.lng);
}
updateMarker() {
this.lat = this.tempLat;
this.lng = this.tempLong;
this.getAddress(this.lat, this.lng);
}
mapIdle() {
if (this.tempLat && this.tempLong) {
if (this.tempLat != this.lat || this.tempLong != this.lng) {
this.updateMarker();
}
}
}