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文件中以这种方式使用

<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 2

您将必须拥有一个已经可以使用或正在创建的api。我已经创建了一个演示给您。然后，您将必须使用httpClient，创建一个可观察的e.g = 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"
  }]
}

Answer 3

以下html代码用于将Google Map与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());
 };

在component.ts中

您将导入服务。
通过服务中的实例创建实例构造函数。
调用您的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"
    }
]

角谷歌地图从JSON加载标记数据

3 个答案: