代码之家 › 专栏 › 技术社区 › Dicky Raambo

角度google地图从JSON加载标记数据

angular-google-maps angular

Dicky Raambo · 技术社区 · 6 年前

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?。。。

例子:

示例.com/api/v1/info/1

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

示例.com/api/v1/info/2

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

谢谢您!

3 回复 | 直到 6 年前

dasunse 6 年前

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

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

您可以使用自己的服务从自己的源填充标记对象

Patricio Vargas 6 年前

你必须有一个已经在工作的api或者创建一个api。我创造了一个只是为了演示给你。你必须使用 httpClient ,创建一个observate,例如=markers$,然后使用异步管道订阅它。

组件.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();
}

服务.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>

这个将返回如下所示的JSON:

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

Draken R. Shilling 6 年前

下面的html代码是使用带有角度的google map,我们使用object markersLocations 这是一个JSON对象,它的值来自API。 latitude 和 longitude <agm-map> 地图中心

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

服务.ts

要调用服务,您将使用 httpclient 在角度上,所以您将添加这行代码

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

那就用它吧

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

您将导入您的服务。
构造器。
调用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"
    }
]