Angular-google-maps: Menggunakan Geocoder dengan GoogleMapsAPIWrapper

Dibuat pada 1 Okt 2016  ·  42Komentar  ·  Sumber: SebastianM/angular-google-maps

Saya melihat di edisi #139 Anda menyediakan kemampuan untuk mengakses objek google.maps melalui fungsi getMap(), yang saya asumsikan sekarang adalah fungsi getNativeMap() di GoogleMapsAPIWrapper. Saya juga membaca bahwa orang lain telah membuatnya berfungsi, tetapi saya tidak dapat menemukan dokumentasi atau contoh tentang cara menggunakan GoogleMapsAPIWrapper dan Geocoder.

import { Component, OnInit } from '@angular/core';
import { LocationService } from '../../core/location.service';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

declare var google: any;

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor(private wrapper: GoogleMapsAPIWrapper) {
    this.wrapper.getNativeMap().then((m) => {
      console.log("test");
    });

  }

  ngOnInit() {
    // var address = "1045 mission street san francisco";

    // var geocoder = new google.maps.Geocoder();

    // var result = "";

    // geocoder.geocode({ 'address': address }, (results, status) => {
    //   var latitude = results[0].geometry.location.lat();
    //   var longitude = results[0].geometry.location.lng();
    //   console.log("lat: " + latitude + ", long: " + longitude);
    // });
  }
}

Saat ini saya bahkan tidak bisa membuat console.log untuk mencetak "test". Saya tidak yakin mengapa. Juga apakah variabel m akan setara dengan google.maps? Sehingga saya dapat menggunakan m.Geocoder()?

Saya juga tidak yakin apakah saya mengimpor GoogleMapsAPIWrapper dengan benar. Saat ini saya mengimpornya di core.module, karena pedoman Angular 2 mengatakan agar layanan ada di core.module. "sebm-google-map" berfungsi untuk saya tanpa masalah, jadi saya pikir AgmCoreModule diimpor dengan benar, saya hanya tidak yakin tentang cara menggunakan GoogleMapsAPIWrapper.

import {
    ModuleWithProviders, NgModule,
    Optional, SkipSelf
} from '@angular/core';

import { AgmCoreModule, GoogleMapsAPIWrapper } from 'angular2-google-maps/core';


import { FirebaseService, FirebaseServiceConfig } from './firebase.service';
import { LocationService } from './location.service';


@NgModule({
    imports: [AgmCoreModule.forRoot({apiKey: "blahblahapikey"}),],
    declarations: [],
    exports: [AgmCoreModule],
    providers: [FirebaseService, LocationService, GoogleMapsAPIWrapper]
})
export class CoreModule {

    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error(
                'CoreModule is already loaded. Import it in the AppModule only');
        }
    }

    static forRoot(config: FirebaseServiceConfig): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [
                { provide: FirebaseServiceConfig, useValue: config }
            ]
        };
    }
}

Saya sudah bisa mendapatkan google.maps.Geocoder() untuk bekerja melalui GMap dari PrimeNG, tapi kadang-kadang saya mendapatkan google tidak didefinisikan kesalahan. Jadi saya mencoba menggunakan peta google Sebastian sebagai gantinya.

stale
Sumber
picture RedFour
👍4

Komentar yang paling membantu

Bagaimana dengan ini -

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();
                }
            });
        })
    }
}
picture vintesh pada 10 Okt 2016
👍25 🎉7 ❤2 👀1 🚀1 😕1 😄1 👎1

Semua 42 komentar

Jika Anda hanya membutuhkan Geocoder(), Anda tidak perlu menggunakan getNativeMap().

Saya mengimpor MapsAPILoader , jadi saya bisa menggunakannya dengan cara ini:

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

Tetapi jika Anda ingin mendapatkan peta asli, TestComponent Anda harus dimuat di dalam komponen peta google :

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

dan Anda harus yakin bahwa instance GoogleMapsAPIWrapper Anda di dalam TestComponent adalah instance yang sama yang digunakan oleh SebmGoogleMap

gnujeremie picture gnujeremie pada 2 Okt 2016
👍8 🎉3 ❤1

@gnujeremie thx untuk tip untuk menggunakan MapsAPILoader. Bagaimana cara saya mengimpornya? Apakah Anda mengimpornya bersama dengan AgmCoreModule?

RedFour picture RedFour pada 3 Okt 2016

Tidak, AgmCoreModule diimpor hanya di modul saya menggunakan google map.
Saya langsung mengimpor import { MapsAPILoader } from 'angular2-google-maps/core'; di layanan saya.

gnujeremie picture gnujeremie pada 3 Okt 2016
👍1

Bagaimana dengan ini -

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 picture vintesh pada 10 Okt 2016
👍25 🎉7 ❤2 👀1 🚀1 😕1 😄1 👎1

Selain solusi yang disajikan oleh @vintesh, saya harus memperbarui lat dan lng di dalam NgZone untuk memperbarui peta.

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!')
            );
    }
FabioBentoLuiz picture FabioBentoLuiz pada 9 Des 2016
👍7

Saya masih mengalami masalah saat mencoba menggunakan geocoder. Berikut kode saya.

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

Saya mendapatkan dua kesalahan:

Cannot find name 'google'.
dan
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 picture slooker pada 4 Jan 2017
👍3 😕1

@slooker Anda perlu menambahkan declare var google: any; sebelum deklarasi konstruktor Anda.

gnujeremie picture gnujeremie pada 4 Jan 2017
👍2

@gnujeremie Itu memecahkan masalah google yang tidak terdefinisi, tetapi masih memberi tahu saya bahwa MapsAPILoader tidak diekspor oleh angular2-google-maps.

slooker picture slooker pada 4 Jan 2017

@slooker Saya juga menghadapi masalah yang sama dan kesalahan MapsAPILoader akan datang karena "node_modules/angular2-google-maps/core/index.js" tidak mengekspor MapsAPILoader. Saya telah memecahkan masalah ini. Masukkan kode berikut dalam file "node_modules/angular2-google-maps/core/index.js" sebagai berikut:

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

Ini bekerja untuk saya. Semoga ini akan berhasil untuk Anda juga.

kumar-ravi007 picture kumar-ravi007 pada 25 Jan 2017
👎1

Apakah kalian memiliki versi kerja? Saya mendapatkan alamat saya dari database dan saya membutuhkan koordinatnya untuk membangun kluster penanda. GeoCoder didefinisikan dalam konstruktor tetapi tidak dapat diakses melalui metode nginit.

DoubleExposure picture DoubleExposure pada 6 Jun 2017

VinTesh, mengapa layanan yang Anda daftarkan mengatakan bahwa google tidak terdefinisi? Apa cara yang tepat untuk melakukan ini? Terima kasih

DoubleExposure picture DoubleExposure pada 7 Jun 2017

Saya menghadapi masalah google yang tidak terdefinisi yang sama. Ada saran?

Saya menggunakan "@agm/core": "^1.0.0-beta.0"

Terima kasih

nichovski picture nichovski pada 17 Jun 2017
👍4 
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) => {

adalah kode saya dan berfungsi dengan baik, tetapi saya mencoba menulis unit test

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();

tapi gagal dengan

 Failed: google is not defined

Tolonglah?

daBishMan picture daBishMan pada 19 Jun 2017

Halo teman-teman "google undefined". Apakah Anda mencoba tip dari rekan kami @gnujeremie?
Ini berfungsi untuk saya (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();
            }

        });
    }
}
FabioBentoLuiz picture FabioBentoLuiz pada 22 Jun 2017
👍12 ❤1

Fabio, dapatkah Anda memberikan contoh bagaimana ini disebut dan digunakan?

DoubleExposure picture DoubleExposure pada 23 Jun 2017
👍2

@DoubleExposure dengan asumsi Anda memiliki konstruktor seperti ini

konstruktor (ms pribadi: MapsService) {
}

Anda dapat memanggil ini dalam kode Anda

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

neilpennell picture neilpennell pada 23 Jul 2017
👍3

@FabioBentoLuiz @gnujeremie Hai, saya sudah mencoba kode Anda dan berhasil. Kecuali panggilan pertama yang selalu gagal. Saya sudah mencoba melakukan panggilan pertama di ngOnInit tetapi sepertinya tidak berhasil.

Ini upaya penggunaan saya

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 picture Canadadry pada 27 Okt 2017

Hai @Canadadry ,
Bagaimana panggilan pertama gagal? Apakah Anda menggunakan MapsAPILoader?

FabioBentoLuiz picture FabioBentoLuiz pada 27 Okt 2017

Peta saya seharusnya berpusat pada alamat.
Jadi saya telah memetakan clickSearchAddress() pada sebuah tombol dan Itu hanya memindahkan peta pada klik kedua. Pada klik pertama saya hanya memiliki log : Geocoding selesai!
Hal yang lebih aneh, saya telah menempatkan panggilan clickSearchAddress() pada langganan route.paramMap di ngOnInit dan di sana fungsi tersebut berfungsi pada panggilan pertama.

Saya telah mencoba menunggu sebelum mulai mengklik untuk memastikan skrip peta google dimuat tetapi masih membutuhkan dua klik.

Layanan Maps yang digunakan adalah yang Anda berikan.

Canadadry picture Canadadry pada 27 Okt 2017

Cobalah menggunakan NgZone seperti yang dijelaskan di sini

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

Tambahkan ke konstruktor Anda

constructor(private _zone: NgZone){
}

Kemudian atur lat dan lng seperti ini:

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!')
            );

Ini adalah utas lain yang menjelaskan alasannya.

Beri tahu saya jika berhasil.

FabioBentoLuiz picture FabioBentoLuiz pada 28 Okt 2017

Tampaknya berhasil, tetapi saya tidak mengerti mengapa.
Terima kasih

Canadadry picture Canadadry pada 31 Okt 2017

Saya membuatnya bekerja dengan agm menggabungkan jawaban dari @vintesh , @FabioBentoLuiz dan @neilpennell.

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

toko.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;
}

Terima kasih teman-teman!

taneljoeaar picture taneljoeaar pada 11 Nov 2017
👍10 🎉3 ❤2 😄2

@taneljoeaar apakah Anda tahu mengapa saya mendapatkan google tidak ditentukan
di MappingService.getLatLan

Saya kebanyakan menyalin dan menempelkan kode Anda.

Terima kasih banyak.

beachjf picture beachjf pada 26 Nov 2017

@beachjf gunakan solusi @FabioBentoLuiz sebagai gantinya, untuk mendapatkan lat dan panjang karena variabel " google" mungkin masih belum ditentukan karena skrip google maps masih memuat. itu bekerja untuk saya.

codingx2020 picture codingx2020 pada 6 Des 2017

Mencoba
impor { GoogleMapsAPIWrapper } dari '@agm/core';
dari pada
impor { GoogleMapsAPIWrapper } dari 'angular2-google-maps/core';
untuk sudut terbaru

siddheshandhari picture siddheshandhari pada 12 Jan 2018
😕1

@taneljoeaar atau coba import { } from 'googlemaps'; di file apa pun Anda mendapatkan kesalahan.
Pastikan jenis untuk googlemaps diinstal. ( npm install --save @types/googlemaps )

saiyaff picture saiyaff pada 22 Jan 2018

Yah saya tahu itu adalah pertanyaan lama, tetapi saya ingin mengomentari topik ini kode tentang mendapatkan objek lokasi dengan nama dan jenis kota, negara bagian dan negara. Tetapi, dalam kasus saya, saya perlu mendapatkan nama-nama ini dari koordinat pengguna. Jadi, untuk melakukannya saya menulis ini berdasarkan komentar terakhir:

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

Untuk mendapatkan nilai koordinat, saya menggunakan geolokasi asli ionik.
Kode berasal dari proyek sudut 2+ & Ionic.

marcosjoao37 picture marcosjoao37 pada 16 Feb 2018

Saya telah menerapkan kode seperti yang Anda tunjukkan tetapi saya mendapatkan kesalahan berikut:

Galat GALAT: StaticInjectorError [MapsAPILoader]:
StaticInjectorError [MapsAPILoader]:
NullInjectorError: Tidak ada penyedia untuk MapsAPILoader!
di _NullInjector.get (core.js: 923)
di resolveToken (core.js: 1211)
di tryResolveToken (core.js: 1153)
di StaticInjector.get (core.js: 1024)
di resolveToken (core.js: 1211)
di tryResolveToken (core.js: 1153)
di StaticInjector.get (core.js: 1024)
di resolveNgModuleDep (core.js: 10586)
di _createClass (core.js: 10625)
di _createProviderInstance $1 (core.js: 10597)

CATATAN: Saya menggunakan Angular 5

Bisakah Anda membantu saya.
Terima kasih.

ronaldrenteria picture ronaldrenteria pada 21 Feb 2018

@ronaldrenteria Apakah Anda menempatkan

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

pada "impor" Anda di app.modules.ts?
Apakah Anda menggunakan LazyLoading?
Kesalahan itu terkadang terjadi ketika Anda lupa melakukan impor atau melakukan semua persyaratan yang diperlukan oleh lib agar berfungsi.
Anda bisa mendapatkan info lebih lanjut di halaman itu: Peta Sudut - Memulai .

marcosjoao37 picture marcosjoao37 pada 21 Feb 2018

Saya ingin memberi tahu Anda, saya sudah menunjukkan peta dan penanda, tetapi yang ingin saya lakukan adalah mengubah beberapa arah menjadi lintang dan bujur, tetapi ini tidak mungkin.

Saya tidak memiliki impor di app.modules.ts, karena setiap komponen menggunakan modulnya sendiri dan jika saya menggunakan LazyLoading.

Dalam hal ini saya memiliki komponen yang disebut home.component.ts dan ini pada gilirannya memiliki modul sendiri yang disebut home.module.ts

Sebelum menggunakan MapsAPILoader itu sudah menunjukkan peta dan penanda (contoh dengan menempatkan bujur dan lintang secara manual), tapi sekarang saya ingin membaca alamat dari DB dan mendapatkan garis bujur.

Terima kasih.

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!'));
  }
}
ronaldrenteria picture ronaldrenteria pada 22 Feb 2018

Hai semuanya

Mungkin seseorang menghadapi masalah serupa.

Saya perlu menyesuaikan perpustakaan AGM, saya mengunduh kode dan memasukkan kode ini seperti bagian dari proyek saya, oleh karena itu saya menambahkan agmCoreModule dari folder src lokal di apps.module, seperti ini.

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

AgmCoreModule.forRoot({
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}),

saya memiliki halaman dengan penanda yang dihasilkan dalam loop ngFor. Tetapi saya mengalami kesalahan berikutnya.

```

[latitude]="ubicacion.posicion.latitud"
[longitude]="ubicacion.posicion.longitud"
[markerClickable]="benar"
>

```

Kesalahan ERROR: Tidak tertangkap (dalam janji): ReferenceError: google tidak ditentukan
ReferensiError: google tidak ditentukan
di MarkerManager.webpackJsonp.102.MarkerManager.addMarker (marker-manager.ts:82)
di AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges (marker.ts:169)

Ada ide apa yang bisa menjadi masalah?

ramossantiago picture ramossantiago pada 23 Feb 2018

Untuk semua yang mendapatkan kesalahan 'google is undefined':

gunakan acara ini 'mapReady' dari elemen agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

ShivKumarSaini picture ShivKumarSaini pada 7 Mar 2018
👍4 🎉2 ❤1

Bisakah seseorang datang dengan contoh kerja?

mathias-ewald picture mathias-ewald pada 14 Mar 2018
👍1

Contoh kerja layanan geocoding https://stackblitz.com/edit/angular-google-maps-demo-geocoding berdasarkan contoh yang tercantum di sini.

supruniuk picture supruniuk pada 10 Apr 2018
👍11 ❤5 🎉3

Bisakah saya memanggil mapsAPILoader.load() beberapa kali?

maksimbykov picture maksimbykov pada 4 Mei 2018

hai setiap orang saya punya sedikit masalah , saya baru di AGM dan angular juga , tapi masalahnya saya mendapatkan place_id , saya ingin mengubah ini menjadi objek latlng itu saja , bantuan apa pun dihargai

henoktsegaye picture henoktsegaye pada 23 Mei 2018

@henoktsegaye prinsip dasar di sini https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
jadi Anda dapat menggunakan contoh dari yang diposting di atas, dalam beberapa kata Anda membutuhkan this.geocoder = new google.maps.Geocoder() dan geocoder.geocode({'placeId': placeId}, callbackFunction(results, status)) tetapi ini akan terjadi setelah skrip dimuat

maksimbykov picture maksimbykov pada 23 Mei 2018
👍1

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

stale[bot] picture stale[bot] pada 13 Nov 2018

@supruniuk thz TUHAN

adakah cara untuk mengetik hasil yang Dapat Diamati?

xanscale picture xanscale pada 20 Des 2018

@xanscale Mengapa tidak, cukup implementasikan antarmuka dan gunakan untuk pemeriksaan tipe
ekspor antarmuka Lokasi {
lat: angka;
lng: nomor;
}

supruniuk picture supruniuk pada 20 Des 2018

@suruniuk maksud saya mengetik objek google seperti hasil dan status

xanscale picture xanscale pada 21 Des 2018

Seperti komentar @SainiSK

Untuk semua yang mendapatkan kesalahan 'google is undefined':

gunakan acara ini 'mapReady' dari elemen agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Sampel:
(mapReady)="initializedGoogleMapGeocoder($event)"

smarquez-dev picture smarquez-dev pada 23 Jul 2019
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

agil-NUBBA picture agil-NUBBA  ·  34Komentar
iget-master picture iget-master  ·  24Komentar
ramnes picture ramnes  ·  54Komentar
petalyaa picture petalyaa  ·  22Komentar
SteveDowsett picture SteveDowsett  ·  23Komentar