Фото Rawpixel.com на Unsplash
В этом сообщении в блоге я собираюсь показать вам, как отобразить текущее местоположение с помощью Google Map. Я собираюсь использовать Угловые карты Google (AGM) Чтобы ускорить время разработки, а также очень легко использовать. Это также хороший способ для меня пробовать библиотеки в угловой экосистеме.
Настраивать
Чтобы добавить библиотеку в свой проект, откройте командную строку и запустите эту команду
NPM Установка @ AGM/Core –save
И добавьте необходимый импорт в ваше приложение. Module.ts
// imagine more imports here
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
//imagine modules here
AgmCoreModule.forRoot({
apiKey: 'YOUR_KEY'
})
],
providers: [],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Получение API ключ
- Перейдите на консоль API Google.
- Выберите проект или создайте новый. Обратите внимание, что если вы являетесь пользователем Firebase, вы можете увидеть ваш проект здесь и использовать его для получения ключа API.
Замените ключ заполнителя в приложение. Module.ts со своим собственным ключом.
Мы закончили с установкой.
Теперь мы можем использовать вроде AGM
Чтобы отметить наше текущее местоположение, мы в основном заинтересованы в вкладах «широты» и долготы.
Все, что мы оставили, чтобы сделать, это получить эти ценности. Мы можем получить эти значения с фрагментом кода ниже.
import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 5';
lat:any;
lng:any;
constructor(){
if (navigator)
{
navigator.geolocation.getCurrentPosition( pos => {
this.lng = +pos.coords.longitude;
this.lat = +pos.coords.latitude;
});
}
}
}
Вот и все. Спасибо за прочтение.
Вот стекблиц демонстрация