Angular-google-maps: استخدام المكود الجغرافي مع GoogleMapsAPIWrapper

إذا كنت تحتاج فقط إلى 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>

وعليك التأكد من أن مثيل GoogleMapsAPIWrapper داخل TestComponent هو نفس المثيل المستخدم بواسطة SebmGoogleMap

gnujeremie thx للحصول على معلومات حول استخدام MapsAPILoader. كيف أقوم باستيراده؟ هل قمت باستيراده مع AgmCoreModule؟

لا ، يتم استيراد AgmCoreModule فقط في الوحدة النمطية الخاصة بي باستخدام خرائط جوجل.
استوردت مباشرة 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 ، كان عليّ تحديث خط العرض و lng داخل 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 لقد واجهت أيضًا نفس المشكلة وخطأ MapsAPILoader قادم لأن "node_modules / angular2-google-maps / core / index.js" لا يصدر 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();
            }

        });
    }
}

فابيو ، هل يمكنك تقديم عينة من كيفية تسمية هذا وكيفية استخدامه؟

DoubleExposure بافتراض أن لديك مُنشئ مثل هذا

المُنشئ (ms الخاص: MapsService) {
}

يمكنك استدعاء هذا في التعليمات البرمجية الخاصة بك

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

FabioBentoLuizgnujeremie Hi ' لقد جربت الكود الخاص بك وهو يعمل بشكل رائع. باستثناء المكالمة الأولى التي تفشل دائمًا. لقد حاولت إجراء مكالمة أولى في 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() على زر وهو يحرك الخريطة فقط عند النقرة الثانية. في النقرة الأولى ، لدي فقط السجل: اكتمل الترميز الجغرافي!
الغريب ، لقد وضعت استدعاء clickSearchAddress() على اشتراك route.paramMap في ngOnInit وهناك تعمل الوظيفة على المكالمة الأولى.

لقد حاولت الانتظار قبل البدء في النقر للتأكد من تحميل برنامج نصي لخرائط Google ولكنه لا يزال يتطلب قطعتين.

إن خدمة الخرائط المستخدمة هي التي تقدمها.

جربه باستخدام 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!')
            );

هنا موضوع آخر يشرح سبب ذلك.

اسمحوا لي أن أعرف ما اذا كان يعمل.

يبدو أنه يعمل ، لكني لا أرى السبب.
شكرا

لقد عملت مع agm بدمج إجابات vintesh و FabioBentoLuiz و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();
                }
            });
        })
    }
}

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

Stores.component.html:

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

Stores.component.css:

agm-map {
    height: 300px;
}

شكرا يا شباب!

taneljoeaar هل تعرف لماذا لم يتم تعريف الحصول على جوجل
في MappingService.getLatLan

أنا في الغالب أقوم بنسخ ولصق الكود الخاص بك.

شكرا جزيلا.

beachjf استخدم حل FabioBentoLuiz بدلاً من ذلك ، للحصول على خط العرض وطويلة لأن المتغير "google" قد لا يزال غير محدد حيث لا تزال النصوص البرمجية لخرائط Google قيد التحميل. إنه يعمل بالنسبة لي.

يحاول
استيراد {GoogleMapsAPIWrapper} من "@ agm / core" ؛
بدلا من
استيراد {GoogleMapsAPIWrapper} من "angular2-google-maps / core" ؛
لآخر زاوية

taneljoeaar أو جرّب import { } from 'googlemaps'; في أي ملف تحصل على الخطأ فيه.
تأكد من تثبيت أنواع خرائط Google. ( 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);
          }
        });
      }
    );
  }

للحصول على قيم الإحداثيات ، استخدمت الموقع الجغرافي الأصلي الأيوني.
الكود جاء من الزاوي 2+ ومشروع أيوني.

لقد قمت بتنفيذ الكود بالشكل الذي قمت بإظهاره ولكني أتلقى الخطأ التالي:

خطأ خطأ: StaticInjectorError [MapsAPILoader]:
StaticInjectorError [MapsAPILoader]:
NullInjectorError: لا يوجد مزود لـ MapsAPILoader!
في _NullInjector.get (core.js: 923)
في ResolutionToken (core.js: 1211)
في tryResolveToken (core.js: 1153)
في StaticInjector.get (core.js: 1024)
في ResolutionToken (core.js: 1211)
في tryResolveToken (core.js: 1153)
في StaticInjector.get (core.js: 1024)
في developerNgModuleDep (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 - Getting Started .

حسنًا ، أريد أن أخبركم ، لقد قمت بالفعل بعرض الخريطة وعلامة ، ولكن ما أريد القيام به هو تحويل بعض الاتجاهات إلى خطوط الطول والعرض ، لكن هذا لم يكن ممكنًا.

ليس لديّ الاستيراد في app.modules.ts ، لأن كل مكون يستخدم الوحدة النمطية الخاصة به وإذا كنت أستخدم LazyLoading.

في هذه الحالة لدي مكون يسمى home.component.ts وهذا بدوره له وحدة خاصة به تسمى home.module.ts

قبل استخدام MapsAPILoader ، أظهر بالفعل الخريطة والعلامات (على سبيل المثال عن طريق وضع خط الطول وخط العرض يدويًا) ، ولكن الآن أريد قراءة العناوين من قاعدة البيانات والحصول على خط الطول.

شكرا لك.

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 ، لقد قمت بتنزيل الكود وقمت بتضمين هذا الرمز مثل جزء من مشروعي ، لذلك قمت بإضافة agmCoreModule من مجلد src المحلي في apps.module ، مثل هذا.

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

AgmCoreModule.forRoot ({
مفتاح api: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}) ،

لدي صفحة بها علامات تم إنشاؤها في حلقة 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":

استخدم هذا الحدث "mapReady" لعنصر agm-map.
" 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":

استخدم هذا الحدث "mapReady" لعنصر agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

عينة:
(mapReady) = "initializedGoogleMapGeocoder ($ event)"