Угловые карты Google загружают данные маркера из JSON

Question

Я просто играю с угловыми картами Google https://angular -maps.com / ) и плачу с примером.на примере маркера просто напишите вручную.

здесь код:

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent  {
  // google maps zoom level
  zoom: number = 10;

  // initial center position for the map
  lat: number = 40.6851128;
  lng: number = -73.8587647;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [
      {
          lat: 40.760588,
          lng: -73.919405,
          label: 'A',
          draggable: false
      },
      {
          lat: 40.715659,
          lng: -73.907247,
          label: 'A',
          draggable: false
      },
  ]
}

здесь маркер просто жесткое кодирование, так как сделать его динамичным и использовать внешний API? ...

пример:

example.com / api / v1 / info / 1

{
    "name": "Some Location",
    "lat": "40.760588",
    "lng": "-73.919405",
    "status": "ok"
}

example.com / api / v1 / info / 2

{
    "name": "Some Location",
    "status": "ok"
}

спасибо!

Answer 1

В следующем HTML-коде используется карта Google с angular, мы используем объект markersLocations, который является объектом JSON, его значение из API.latitude и longitude атрибуты в <agm-map> для центра карты

HTML

<agm-map  [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngIf="markersLocations.length >0" *ngFor="let location of 
    markersLocations" [latitude]="location.latitide" 
    [longitude]="location.langtitude" 
  [iconUrl]="'http://maps.google.com/mapfiles/ms/icons/' + location.iconUrl +'.png'">
  </agm-marker>
</agm-map>

service.ts

Чтобы позвонить в службу, вы будете использовать httpclient в угловом формате, поэтому добавите эту строку кода

import { HttpClient } from '@angular/common/http';

Затем используйте ее

getLocations() {
    return this.http.get(URL).map((response:Response) => response.json());
 };

в своем компоненте.TS

1. вы будете импортировать свой сервис.
2. создать экземпляр из службы в конструкторе.
3. вызов вашего API для получения файла JSON.

Объект JSON будет таким

[
    {
        "latitide": 27.9158,
        "langtitude": 34.3300,
        "title": "sharm el sheikh",
        "iconUrl": "yellow-dot"
    },
    {
        "latitide": 30,
        "langtitude": 31,
        "title": "Cairo",
        "iconUrl": "green-dot"
    }
]

Answer 2

В вашем html-файле используйте таким образом

<agm-map [latitude]="lat" [longitude]="lng" (mapClick)="click($event)" click='markerClick($event)'>
<agm-marker  *ngFor="let place of markers" [latitude]=place.lat [longitude]=place.lng  title={{place.title}}  (markerClick)="clickedMarker(place.lat, place.lng)" >
<agm-info-window><strong>{{place.label}}</strong></agm-info-window>
</agm-marker>
</agm-map>

В вашем машинном файле app.component.ts используйте таким образом

markers: any[] = [{'lat': 7.289574289959695, 'lng': 80.63236355781555, 'title':  'Town1','label': 'label1'},{ 'lat': 7.468432329097338, 'lng': 80.04151582717896, 'title': 'Town2', 'label': 'label2' }];

Вы можете использовать свой собственный сервис для заполнениямаркеры объектов из собственного источника

Answer 3

Вам понадобится API, который уже работает, или создайте его.Я создал один только для того, чтобы продемонстрировать его вам.Затем вам нужно будет использовать httpClient, вы создаете наблюдаемую eg = markers $, затем вы собираетесь подписаться на нее, используя асинхронный канал.

component.ts

import { Observable } from "rxjs/Observable";
.
.
lat: number = 52.358;
lng: number = 4.916;
markers$ : Observable<any>;

ngOnInit() {
 this.markers$ = this.getLocations();
}

getLocations(): Observable<any> {
   return this.heroService.getLocations();
} 

service.ts

import { HttpClient, HttpErrorResponse } from "@angular/common/http";
.
.
BASE_URL = "https://unidosmexico85.firebaseio.com";
LOCATIONS_URL = "/locations.json";
getLocation(): Observable<any> {
  return this.http
  .get(this.BASE_URL + this.LOCATIONS_URL);
}

HTML

<agm-map [latitude]="lat" [longitude]="lng" style="height: 500px">
   <div  *ngFor="let marker of markers | async;">
        <agm-marker [latitude]="marker.lat" [longitude]="marker.lng"></agm-marker>
  </div>
</agm-map>

API вернетсяJSON, который выглядит так:

{
  "locations" : [ {
    "name": "Marker1",
    "lat" : 52.358,
    "lng" : 4.916,
    "status": "okay"
  }, {
    "name": "Marker2",
    "lat" : 40.760588,
    "lng" : -73.919405,
    "status": "not okay"
  }]
}