【问题标题】:how to get full address from latitude,longitude in angular 2如何从角度2中的纬度,经度获取完整地址
【发布时间】:2017-04-09 19:39:47
【问题描述】:

我正在使用 angular 2-google-maps。
如何使用打字稿在angular2谷歌地图中从纬度、经度获取国家和大头针等地址?

【问题讨论】:

标签: angular


【解决方案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”,因为它丢失了参考

希望对你有帮助

【讨论】:

    【解决方案2】:

    使用Angular Google Maps,您可以执行以下操作:

    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:

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

    【讨论】:

    【解决方案3】:

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

    它可免费用于免费应用程序/网站。

    【讨论】:

      猜你喜欢
      • 2012-03-13
      • 2010-12-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-29
      • 2019-10-30
      • 2012-02-15
      • 1970-01-01
      相关资源
      最近更新 更多