Я видел в выпуске № 139, что вы предоставляете возможность доступа к объекту google.maps через функцию getMap(), которая, как я предполагаю, теперь является функцией getNativeMap() в GoogleMapsAPIWrapper. Я также читал, что другие люди заставили его работать, но я не могу найти никакой документации или примеров того, как использовать GoogleMapsAPIWrapper и 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);
// });
}
}
Прямо сейчас я даже не могу заставить console.log распечатать «тест». Я не уверен, почему. Также будет ли переменная m эквивалентом google.maps? Чтобы я мог использовать m.Geocoder()?
Я также не уверен, правильно ли я импортирую GoogleMapsAPIWrapper. В настоящее время я импортирую его в core.module, поскольку в рекомендациях Angular 2 говорится, что службы должны находиться в core.module. «sebm-google-map» у меня работает без проблем, поэтому я думаю, что AgmCoreModule импортирован правильно, я просто не уверен, как использовать 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 }
]
};
}
}
Мне удалось заставить google.maps.Geocoder() работать через GMap от PrimeNG, но иногда я получаю ошибки, связанные с тем, что Google не определен. Поэтому вместо этого я пытаюсь использовать гугл-карту Себастьяна.
Если вам просто нужен 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 спасибо за совет по использованию MapsAPILoader. Как мне его импортировать? Вы импортировали его вместе с 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 Я тоже столкнулся с той же проблемой, и возникает ошибка 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.
ВинТеш, почему в перечисленном вами сервисе написано, что google undefined? Как правильно это настроить? Спасибо
Я столкнулся с той же проблемой Google Undefined. Какие-либо предложения?
Я использую "@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 , если у вас есть такой конструктор
конструктор (частный мс: 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()
с кнопкой, и она перемещает карту только при втором нажатии. При первом нажатии у меня есть только журнал: Геокодирование завершено!
Странная вещь, я поставил вызов clickSearchAddress()
на подписку route.paramMap
в ngOnInit, и там функция работает при первом вызове.
Я пытался подождать, прежде чем начать щелкать, чтобы убедиться, что скрипт карты 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!')
);
Вот еще один поток , который объясняет причину этого.
Дайте мне знать, если это работает.
Кажется, это работает, но я не понимаю, почему.
Спасибо
Я получил это, работая с 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();
}
});
})
}
}
магазины.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!')
);
}
}
магазины.component.html:
<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
магазины.компонент.css:
agm-map {
height: 300px;
}
Спасибо, парни!
@taneljoeaar знаете ли вы, почему у меня не определяется Google?
на MappingService.getLatLan
Я в основном копирую и вставляю ваш код.
Большое спасибо.
Вместо этого @beachjf используйте решение @FabioBentoLuiz , чтобы получить широту и долготу, потому что переменная « google » может быть еще не определена, поскольку скрипты карт Google все еще загружаются. меня устраивает.
Пытаться
импортировать {GoogleMapsAPIWrapper} из '@agm/core';
вместо
импортировать {GoogleMapsAPIWrapper} из 'angular2-google-maps/core';
для последнего углового
@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);
}
});
}
);
}
Чтобы получить значения координат, я использовал нативную геолокацию ionic.
Код взят из проекта 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)
при разрешенииNgModuleDep (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?
Вы используете ленивую загрузку?
Эта ошибка иногда возникает, когда вы забываете сделать какой-либо импорт или выполнить все требования, необходимые для работы библиотеки.
Вы можете получить больше информации на этой странице: Angular Maps — Начало работы .
Что ж, я хочу вам сказать, я уже показываю карту и маркер, но я хочу преобразовать некоторые направления в широту и долготу, но это невозможно.
У меня нет импорта в app.modules.ts, потому что каждый компонент использует свой модуль и если я использую LazyLoading.
В этом случае у меня есть компонент с именем home.component.ts, а у него, в свою очередь, есть собственный модуль с именем home.module.ts.
Перед использованием MapsAPILoader он уже показывал карту и маркеры (например, вручную размещая долготу и широту), но теперь я хочу прочитать адреса из БД и получить широту долготы.
Спасибо.
карты.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({
apiKey: «хххххххххххххххххххххххххххххх»
}),
у меня есть страница с маркерами, созданными в цикле ngFor. Но у меня следующая ошибка.
```
[долгота] = "ubicacion.position.longitud"
[markerClickable] = "истина"
>
```
ОШИБКА Ошибка: Uncaught (в обещании): 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 и angular тоже, но дело в том, что я получил 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))
но это будет после загрузки скрипта
Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.
@supruniuk спасибо БОГ
есть ли способ набрать наблюдаемый результат?
@xanscale Почему бы и нет, просто реализуйте интерфейс и используйте его для проверки типов.
экспортировать интерфейс Местоположение {
лат: число;
длинное: номер;
}
@supruniuk я имею в виду ввод объектов Google, таких как результаты и статус
Как комментарий @SainiSK
Для всех тех, кто получает ошибку «google is undefined»:
используйте это событие 'mapReady' элемента agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "
Образец:
(mapReady)="инициализированныйGoogleMapGeocoder($event)"
Самый полезный комментарий
Как насчет этого -