Angular-google-maps: GoogleMapsAPIWrapper와 함께 Geocoder 사용

Geocoder()만 필요한 경우 getNativeMap()을 사용할 필요가 없습니다.

MapsAPILoader 를 가져오고 있으므로 다음과 같이 사용할 수 있습니다.

this.mapsAPILoader.load().then(() => {
    console.log('google script loaded');
    var geocoder = new google.maps.Geocoder();
});

그러나 기본 지도를 얻으려면 TestComponent를 Google 지도 구성요소 내부에 로드해야 합니다.

<sebm-google-map [latitude]="lat" [longitude]="lng">
    <app-test></app-test>
</sebm-google-map>

TestComponent 내부의 GoogleMapsAPIWrapper 인스턴스가 SebmGoogleMap 사용하는 것과 동일한 인스턴스인지 확인해야 합니다.

MapsAPILoader 를 사용하는 팁에 대해 @gnujeremie thx. 수입하려면 어떻게 해야 하나요? AgmCoreModule과 함께 가져오셨나요?

아니요, AgmCoreModule은 Google 지도를 사용하여 내 모듈에서만 가져옵니다.
내 서비스에서 import { MapsAPILoader } from 'angular2-google-maps/core'; 을 직접 가져옵니다.

이건 어때요 -

import { Injectable, NgZone } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { MapsAPILoader } from 'angular2-google-maps/core';
import { Observable, Observer } from 'rxjs';

declare var google: any;

@Injectable()
export class GMapsService extends GoogleMapsAPIWrapper{ 
    constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
        super(__loader, __zone);
    }

    getLatLan(address: string) {
        console.log('Getting Address - ', address);
        let geocoder = new google.maps.Geocoder();
        return Observable.create(observer => {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results[0].geometry.location);
                    observer.complete();
                } else {
                    console.log('Error - ', results, ' & Status - ', status);
                    observer.next({});
                    observer.complete();
                }
            });
        })
    }
}

@vintesh 가 제시한 솔루션 외에도 NgZone 내부의 위도와 경도를 업데이트하여 지도를 업데이트해야 했습니다.

clickSearchAddress() {
        this._mapsService.getLatLan(this.model.address)
            .subscribe(
            result => {
                // needs to run inside zone to update the map
                this._zone.run(() => {
                    this.model.lat = result.lat();
                    this.model.lng = result.lng();
                });
            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

지오코더를 사용하려고 할 때 여전히 문제가 발생합니다. 여기 내 코드가 있습니다.

import { MapsAPILoader } from 'angular2-google-maps/core';
constructor(public mapsApiLoader: MapsAPILoader) {
    this.mapsApiLoader.load().then(() => {
      console.log('google script loaded');
      this.geocoder = new google.maps.Geocoder();
      console.log(this.geocoder);
    });

두 가지 오류가 발생합니다.

Cannot find name 'google'.
그리고
rollup failed: 'MapsAPILoader' is not exported by node_modules/angular2-google-maps/core/index.js (imported by src/services/location.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

@slooker 생성자 선언 전에 declare var google: any; 를 추가해야 합니다.

@gnujeremie 이는 Google의 정의되지 않은 문제를 해결하지만 여전히 MapsAPILoader가 angular2-google-maps에서 내보내지지 않는다고 알려줍니다.

@slooker 나도 같은 문제에 직면했고 "node_modules/angular2-google-maps/core/index.js"가 MapsAPILoader를 내보내지 않기 때문에 MapsAPILoader 오류가 발생합니다. 이 문제를 해결했습니다. 다음과 같이 "node_modules/angular2-google-maps/core/index.js" 파일에 다음 코드를 삽입합니다.

var core_module_2 = require('./core.umd'); exports.MapsAPILoader = core_module_2.MapsAPILoader;

이것은 나를 위해 작동합니다. 이것이 당신에게도 효과가 있기를 바랍니다.

작업 버전이 있습니까? 데이터베이스에서 내 주소를 가져오고 마커 클러스터를 구축하기 위해 좌표가 필요합니다. GeoCoder는 생성자에 정의되어 있지만 nginit 메서드를 통해 액세스할 수 없습니다.

VinTesh, 나열한 서비스에 Google이 정의되지 않았다고 표시되는 이유는 무엇입니까? 이것을 설정하는 적절한 방법은 무엇입니까? 감사 해요

동일한 Google 정의되지 않은 문제에 직면하고 있습니다. 어떤 제안?

"@agm/core"를 사용하고 있습니다: "^1.0.0-beta.0"

감사 해요

getCurrentPositionSuccessCallBack(position: Position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    const latLng: LatLngLiteral = {
      lat: latitude,
      lng: longitude
    };

    const geoCoder = new google.maps.Geocoder();

    geoCoder.geocode({ "location": latLng }, (results, status) => {

내 코드이고 잘 작동하지만 단위 테스트를 작성하려고합니다.

fit('onGeoLocate should set the right location', () => {

    spyOn(navigator.geolocation, 'getCurrentPosition').and.callFake(function () {
      const position = { coords: { latitude: 32, longitude: -96 } };
      arguments[0](position);
    });
    component.onGeoLocate();

그러나 그것은 실패한다

 Failed: google is not defined

도와주세요?

안녕하세요 "google undefined" 친구들입니다. 우리 동료 @gnujeremie의 팁을 시도 했습니까?
이것은 나를 위해 일하고 있습니다 (Angular 2.2.3).

import { Injectable } from '@angular/core';
import { MapsAPILoader } from 'angular2-google-maps/core';
import { Observable } from 'rxjs/Observable';

declare var google: any;

@Injectable()
export class MapsService {
    constructor(private __loader: MapsAPILoader) {

    }

    getGeocoding(address: string) {
        return Observable.create(observer => {
            try {
                //at this point the variable google may be still undefined (google maps scripts still loading)
                //so load all the scripts, then...
                this.__loader.load().then(() => {
                    let geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ address }, (results, status) => {

                        if (status === google.maps.GeocoderStatus.OK) {
                            const place = results[0].geometry.location;
                            observer.next(place);
                            observer.complete();
                        } else {
                            console.error('Error - ', results, ' & Status - ', status);
                            if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                                observer.error('Address not found!');
                            }else {
                                observer.error(status);
                            }

                            observer.complete();
                        }
                    });
                });
            } catch (error) {
                observer.error('error getGeocoding' + error);
                observer.complete();
            }

        });
    }
}

Fabio, 이것이 어떻게 호출되고 사용되는지에 대한 샘플을 제공할 수 있습니까?

@DoubleExposure 다음과 같은 생성자가 있다고 가정합니다.

생성자(비공개 MS: MapsService) {
}

코드에서 이것을 호출할 수 있습니다

this.ms.getGeocoding( '10 10th Street NE, Atlanta, GA 30309' ).subscribe(function (x) {
console.log(x.toString());
});

@FabioBentoLuiz @gnujeremie 안녕하세요, 귀하의 코드를 시도했고 훌륭하게 작동합니다. 항상 실패하는 첫 번째 호출을 제외하고. ngOnInit에서 첫 번째 호출을 시도했지만 작동하지 않는 것 같습니다.

여기 내 사용 시도

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute, ParamMap} from '@angular/router';

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';

import { Place } from './../place';
import { PlaceService } from './../place.service';
import { MapsService } from './map.service';
import { AlertService } from './../AlertComponent/alert.service';


@Component({
  selector: 'app-detailview',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css'], 
})


export class DetailComponent implements OnInit {

    place: Place;  
    lat: number = 51.678418;
    lng: number = 7.809007;

    ngOnInit() {
        let selectedId = this.route.paramMap.subscribe(
                (params: ParamMap)  =>  this.place = this.placeService.getPlaceById(+params.get('id'))
            );
        this.maps.getGeocoding('')
            .subscribe(
            result => console.log(result),
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

    constructor(private placeService: PlaceService,
                private route       : ActivatedRoute,
                private location    : Location,
                private alert       : AlertService,
                private maps        : MapsService) {
    }

    clickSearchAddress() {
        let address = this.place.name + " " + this.place.address + " " + this.place.city + " " + this.place.postalCode;
        this.maps.getGeocoding(address)
            .subscribe(
            result => {
                    this.lat = result.lat();
                    this.lng = result.lng();
            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

    back(){
        this.location.back();
    }

안녕하세요 @Canadadry님 ,
첫 번째 호출이 어떻게 실패합니까? MapsAPILoader를 사용하고 있습니까?

내 지도는 주소를 중심으로 해야 합니다.
그래서 버튼에 clickSearchAddress() 를 매핑했고 두 번째 클릭에서만 지도를 이동합니다. 첫 번째 클릭에는 로그만 있습니다. 지오코딩이 완료되었습니다!
이상한 점은 ngOnInit의 route.paramMap clickSearchAddress() 호출을 넣었고 첫 번째 호출에서 함수가 작동한다는 것입니다.

Google 지도 스크립트가 로드되었는지 확인하기 위해 클릭을 시작하기 전에 기다리려고 했지만 여전히 두 개의 클릭이 필요합니다.

사용된 MapsService는 귀하가 제공한 것입니다.

여기 에 설명된 대로 NgZone 을 사용하여 시도해 보세요.

import { NgZone } from '@angular/core';

생성자에 추가

constructor(private _zone: NgZone){
}

그런 다음 위도와 경도를 다음과 같이 설정합니다.

this.maps.getGeocoding(address)
            .subscribe(
            result => {
                    this._zone.run(() => {
                    this.lat = result.lat();
                    this.lng = result.lng();
            });

            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );

그 이유를 설명하는 또 다른 스레드 가 있습니다.

작동하는지 알려주십시오.

작동하는 것 같지만 이유를 모르겠습니다.
감사 해요

@vintesh , @FabioBentoLuiz 및 @neilpennell의 답변을 결합한 agm으로 작업했습니다.

google-maps.service.ts:

import { Injectable, NgZone } from '@angular/core';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { Observable, Observer } from 'rxjs';

declare var google: any;

@Injectable()
export class GMapsService extends GoogleMapsAPIWrapper{ 
    constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
        super(__loader, __zone);
    }

    getLatLan(address: string) {
        console.log('Getting Address - ', address);
        let geocoder = new google.maps.Geocoder();
        return Observable.create(observer => {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results[0].geometry.location);
                    observer.complete();                    
                } else {
                    console.log('Error - ', results, ' & Status - ', status);
                    observer.next({});
                    observer.complete();
                }
            });
        })
    }
}

shop.component.ts:

import { Component, NgZone } from '@angular/core';
import { GMapsService } from '../services/google-maps.service'

@Component({  
  templateUrl: 'shops.component.html',
  styleUrls: ['shops.component.css']
})

export class ShopsComponent {  
  constructor(private gMapsService: GMapsService, private __zone: NgZone ){}
  lat:number
  lng:number

  getAddress() {
    this.gMapsService.getLatLan('Andorra')
      .subscribe(
        result => {
            this.__zone.run(() => {
                this.lat = result.lat();
                this.lng = result.lng();
            })
        },
        error => console.log(error),
        () => console.log('Geocoding completed!')
      );
  }
}

shop.component.html:

<agm-map [latitude]="lat" [longitude]="lng"></agm-map>

shop.component.css:

agm-map {
    height: 300px;
}

고마워 얘들아!

@taneljoeaar Google이 정의되지 않은 이유를 알고 있습니까?
MappingService.getLatLan에서

저는 주로 귀하의 코드를 복사하여 붙여넣습니다.

정말 감사합니다.

@beachjf 는 @FabioBentoLuiz 솔루션을 대신 사용하여 위도와 경도를 구합니다. Google 지도 스크립트가 아직 로드 중일 때 변수 " google"이 여전히 정의되지 않았을 수 있기 때문입니다. 그것은 나를 위해 작동합니다.

노력하다
'@agm/core'에서 { GoogleMapsAPIWrapper } 가져오기;
대신에
'angular2-google-maps/core'에서 { GoogleMapsAPIWrapper } 가져오기;
최신 각도

@taneljoeaar 또는 오류가 발생한 파일에서 import { } from 'googlemaps'; 를 시도하십시오.
googlemaps 유형이 설치되어 있는지 확인하십시오. ( npm install --save @types/googlemaps )

글쎄, 그것이 오래된 질문이라는 것을 알고 있지만 이 주제에 대해 도시, 주 및 국가의 이름과 유형이 있는 위치 개체를 가져오는 것에 대한 코드에 대해 설명하고 싶습니다. 그러나 제 경우에는 사용자 좌표에서 이러한 이름을 가져와야 했습니다. 그래서, 나는 마지막 코멘트를 기반으로 이것을 썼습니다.

import {MapsAPILoader} from '@agm/core';

...

constructor(private mapsAPILoader: MapsAPILoader) {
    // Get this 'res' from some source, like ionic native geolocation
    // Or, for test, create some object like:
    let res = {
        coords: {
            latitude: 40.826514,
            longitude: -73.914628
        }
    }
    this.codeLatLng(res.coords);
  }

...

codeLatLng(coords) {
    this.mapsAPILoader.load().then(() => {
        console.log('google script loaded');
        let latlng = new google.maps.LatLng({lat: coords.latitude, lng: coords.longitude});
        let geocoder = new google.maps.Geocoder();
        let location = {
          country: null,
          state: null,
          city: null
        };
        geocoder.geocode({
          'latLng': latlng
        }, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              for (let i = 0; i < results[0].address_components.length; i++) {
                for (let b = 0; b < results[0].address_components[i].types.length; b++) {
                  if (results[0].address_components[i].types[b] == "country") {
                    location.country = !location.country ? results[0].address_components[i] : location.country;
                  } else if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    location.state = !location.state ? results[0].address_components[i] : location.state;
                  } else if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
                    location.city = !location.city ? results[0].address_components[i] : location.city;
                  }
                  if (location.city && location.state && location.country) {
                    break;
                  }
                }
              }

              console.log(location);
            } else {
              console.log("Results not available");
            }
          }
          else {
            console.log("Geocoder failed due to: ", status);
          }
        });
      }
    );
  }

좌표 값을 얻으려면 이온 기본 위치 정보를 사용했습니다.
코드는 Angular 2+ 및 Ionic 프로젝트에서 가져왔습니다.

보여주신 대로 코드를 구현했지만 다음 오류가 발생합니다.

오류 오류: StaticInjectorError [MapsAPILoader]:
StaticInjectorError [MapsAPILoader]:
NullInjectorError: MapsAPILoader에 대한 공급자가 없습니다!
_NullInjector.get에서(core.js: 923)
resolveToken에서(core.js: 1211)
tryResolveToken에서(core.js: 1153)
StaticInjector.get에서(core.js: 1024)
resolveToken에서(core.js: 1211)
tryResolveToken에서(core.js: 1153)
StaticInjector.get에서(core.js: 1024)
resolveNgModuleDep(core.js: 10586)
_createClass에서(core.js: 10625)
_createProviderInstance $ 1에서 (core.js: 10597)

참고: 저는 Angular 5를 사용하고 있습니다.

저에게 손을 내밀어 주시겠습니까?
감사합니다.

@ronaldrenteria 배치하셨나요?

AgmCoreModule.forRoot({
      apiKey: '<YOUR-GOOGLE-API-KEY>'
    })

app.modules.ts의 "가져오기"에 대해?
LazyLoading을 사용하고 있습니까?
이 오류는 일부 가져오기를 수행하는 것을 잊거나 lib가 작동하는 데 필요한 모든 요구 사항을 수행하는 것을 잊었을 때 발생합니다.
Angular Maps - 시작하기 페이지에서 더 많은 정보를 얻을 수 있습니다.

글쎄요, 저는 이미 지도와 마커를 보여주고 있지만 제가 하고 싶은 것은 일부 방향을 위도와 경도로 변환하는 것입니다. 하지만 이것은 불가능했습니다.

각 구성 요소가 자체 모듈을 사용하고 있고 LazyLoading을 사용하는 경우 app.modules.ts에 가져오기가 없습니다.

이 경우 home.component.ts라는 구성 요소가 있고 여기에는 home.module.ts라는 자체 모듈이 있습니다.

MapsAPILoader를 사용하기 전에 이미 지도와 마커를 표시했지만(예: 경도와 위도를 수동으로 배치하여) 이제 DB에서 주소를 읽고 경도 위도를 얻고 싶습니다.

감사합니다.

maps.service.ts

import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

// Manejo de Mapas
import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

declare var google: any;

@Injectable()
export class MapsService extends GoogleMapsAPIWrapper {
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
    super(__loader, __zone);
  }

  getLatLan(address: string) {
    console.log('Getting Address - ', address);
    let geocoder = new google.maps.Geocoder();
    return Observable.create(observer => {
      geocoder.geocode({ address: address }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          observer.next(results[0].geometry.location);
          observer.complete();
        } else {
          console.log('Error - ', results, ' & Status - ', status);
          observer.next({});
          observer.complete();
        }
      });
    });
  }
}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { homeRouting } from './home.routing';
import { SmartadminModule} from '../shared/smartadmin.module';
import { HomeComponent} from './home.component';
// 614iT
import { config_church } from './../shared/churchpro.config';
// Indispensable para manejar los mapas.
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
@NgModule({
  imports: [
    CommonModule,
    homeRouting,
    SmartadminModule,
    AgmCoreModule.forRoot({
      apiKey: config_church.GOOGLE_API_KEY
    })
  ],
  declarations: [HomeComponent]
})
export class HomeModule {}

home.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
// Mapas 
import { MapsService } from '../shared/services/maps.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: []
})
export class HomeComponent implements OnInit {
  title: string = 'My first AGM project';
  lat: number = 4.6517056;
  lng: number = -74.1028404;
  zoom: number = 13;
  Glat: number;
  Glng: number;

  constructor(private _mapsService: MapsService, private __zone: NgZone) {}

  ngOnInit() {}

  getAddress() {
    this._mapsService.getLatLan('Andorra').subscribe(result => {
        this.__zone.run(() => {
          this.Glat = result.lat();
          this.Glng = result.lng();
        });
      }, error => console.log(error), () => console.log('Geocoding completed!'));
  }
}

안녕하세요 여러분

누군가 비슷한 문제에 직면해 있을지도 모릅니다.

AGM 라이브러리를 사용자 정의해야 합니다. 코드를 다운로드하고 이 코드를 내 프로젝트의 일부처럼 포함했으므로 다음과 같이 apps.module의 로컬 src 폴더에서 agmCoreModule을 추가합니다.

import { AgmCoreModule } from '../agmLocalModule/core.module';

AgmCoreModule.forRoot({
API 키: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}),

ngFor 루프에서 생성된 마커가 있는 페이지가 있습니다. 하지만 다음 오류가 발생합니다.

```

[위도]="ubicacion.posicion.latitud"
[경도]="ubicacion.posicion.longitud"
[markerClickable]="참"
>

```

오류 오류: 잡히지 않음(약속 중): ReferenceError: Google이 정의되지 않았습니다.
ReferenceError: Google이 정의되지 않았습니다.
MarkerManager.webpackJsonp.102.MarkerManager.addMarker에서 (marker-manager.ts:82)
AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges(marker.ts:169)

문제가 될 수 있는 모든 아이디어

'google is undefined' 오류가 발생하는 모든 사람들을 위해:

agm-map 요소의 이 이벤트 'mapReady'를 사용합니다.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

누군가가 실제 사례를 생각해 낼 수 있습니까?

여기에 나열된 예를 기반으로 하는 지오코딩 서비스 https://stackblitz.com/edit/angular-google-maps-demo-geocoding 의 실제 예.

mapsAPILoader.load()를 여러 번 호출할 수 있습니까?

안녕하세요 여러분, 저는 약간의 문제가 있었습니다. AGM과 각도도 처음이거든요. 하지만 저는 place_id를 얻었습니다. 이것을 latlng 객체로 변경하고 싶었습니다. 도움이 필요합니다.

@henoktsegaye 기본 원칙은 여기 https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
따라서 위에 게시된 예제를 사용할 수 있습니다. 몇 마디로 this.geocoder = new google.maps.Geocoder() 및 geocoder.geocode({'placeId': placeId}, callbackFunction(results, status)) 가 필요하지만 이것은 스크립트가 로드된 후입니다.

'google is undefined' 오류가 발생하는 모든 사람들을 위해:

agm-map 요소의 이 이벤트 'mapReady'를 사용합니다.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

견본:
(mapReady)="initializedGoogleMapGeocoder($event)"