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

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

  •  0
  • 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 年前
        1
  •  1
  •   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' }];
    

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

        2
  •  0
  •   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"
      }]
    }
    
        3
  •  0
  •   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());
     };
    

    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"
        }
    ]