纬度数组和经度映射

Question

在我的项目中,我有一个包含纬度和经度列表的数据库,对应于几个地址,我想从这个数据库中获取它们并使用Angular 2在Google Maps中绘制它们(带路径).但是,我被卡住了在这个问题.我没有输出.我的代码看起来像这样.

服务组件看起来像这样.

import { Injectable } from '@angular/core';
import {Http, Response, Headers, RequestOptions} from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class HawkerserviceService{

baseUrl: string;
  constructor(private http: Http) {


   }
   fetchNews(): Observable<any> {

        return this.http.get('assets/data/locations.json')
                            .map(response => response.json());
   }


    }  

我在家庭组件中调用它,看起来像这样

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Rx';

import {HawkerserviceService } from '../hawkerservice.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public latitude: number;
  public longitude: number;
    public places: any[];

  constructor( private hawkerservice: HawkerserviceService) { }

  ngOnInit() {

    this.hawkerservice.fetchNews()
    .subscribe(
    data=> {this.places= data.locations},
    Error=> console.log('this.places')
    );

  }

}

我的HTML组件是

 <li *ngFor="let location of places>

 <sebm-google-map [latitude]={{location.latitude}}
[longitude]={{location.longitude}}>
  <sebm-google-map-marker  [latitude]={{location.latitude}}
[longitude]={{location.longitude}}></sebm-google-map-marker>
</sebm-google-map> 


</li>

但我没有得到任何输出.

我的JSON数据看起来像这样

{
    "locations": [

        {
            "title": "Sangam Chowk",
            "latitude": 27.692612,
            "longitude": 85.342982
        },
        {
            "title": "Kharikobot",
            "latitude": 27.690227,
            "longitude": 85.342671
        },
        {
            "title": "Ace Instute Of management",
            "latitude": 27.690693,
            "longitude": 85.339581
        }
 ]
}

做这个的最好方式是什么？

Answer 1

我只是快速浏览了一下这个入门指南，但在我看来，您的代码应该如下所示：

<sebm-google-map [latitude]="places[0].location.latitude" [longitude]="places[0].location.longitude">
    <sebm-google-map-marker *ngFor="let location of places" [latitude]="location.latitude" [longitude]="location.longitude"></sebm-google-map-marker>
</sebm-google-map>

但是，您还会收到任何其他错误吗？