如何从角度2

Question

我正在使用有角度的2-google-maps 如何获得像国家和地址的地址从纬度，经度在angular2谷歌地图与打字稿？

Answer 1

这对我有用

getCurrentLocation() {
this.mapsAPILoader.load().then(() => {
  let geocoder = new google.maps.Geocoder;
  let latlng = {lat: this.currentBusiness.latitude, lng: this.currentBusiness.longitude};
  let that = this;
  geocoder.geocode({'location': latlng}, function(results) {
      if (results[0]) {
        that.zoom = 11;
        that.currentLocation = results[0].formatted_address;
        //console.log(that.currentLocation);
      } else {
        console.log('No results found');
      }
  });
});

}

---

您必须重新分配“ this”，因为它丢失了参考

希望对您有帮助

Answer 2

使用sebm-google-map可以执行以下操作：

getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };

    geocoder.geocode(request, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        let result = results[0];
        let rsltAdrComponent = result.address_components;
        let resultLength = rsltAdrComponent.length;
        if (result != null) {
          this.marker.buildingNum = rsltAdrComponent.find(x => x.types == 'street_number').long_name;
          this.marker.streetName = rsltAdrComponent.find(x => x.types == 'route').long_name;
        } else {
          alert("No address available!");
        }
      }
    });
}
}

*确保全局公开google对象：declare var google: any;

然后：

mapClicked($event: MouseEvent) {
    this.marker.lat = $event.coords.lat;
    this.marker.lng = $event.coords.lng;
    this.getGeoLocation(this.marker.lat, this.marker.lng);    
    console.log("Lat: " +this.marker.lat +" Long: " +this.marker.lng)
}

组件/ HTML：

<sebm-google-map [latitude]="marker.lat || centerLat" [longitude]="marker.lng || centerLng" [zoom]="8" (mapClick)="mapClicked($event)">
       <sebm-google-map-marker *ngIf="marker.lat" (markerClick)="clickedMarker(marker.label)" [latitude]="marker.lat" [longitude]="marker.lng" [markerDraggable]="marker.draggable" (dragEnd)="markerDragEnd(marker, $event)">
           <sebm-google-map-info-window [disableAutoPan]="true">
                    {{marker.label}}
           </sebm-google-map-info-window>
       </sebm-google-map-marker>
</sebm-google-map>

Answer 3

谷歌地图有一个api可用于执行此操作：https://developers.google.com/maps/documentation/geocoding/intro

免费使用免费应用/网站。