纬度和经度映射的数组

In my project, I have a database containing a list of latitudes and longitudes, corresponding to several addresses, and I want to take them from this database and plot (with routes) them all in Google Maps using Angular 2. However, I am stuck in this problem. I got no output. My code looks like this.

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

The service component looks like this.

服务组件看起来像这样。

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


    }  

And I have called it in home component and looks like this

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

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')
    );

  }

}

My HTML component is

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

But I am not getting any output.

但我没有得到任何输出。

My JSON data looks like this

我的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
        }
 ]
}

What is the best way to do this?

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

5 个解决方案

#1

Be sure of the path. Try changing the path string with something like './assets/data/locations.json' (note the ./)

确保路径。尝试使用类似'./assets/data/locations.json'的方式更改路径字符串（注意./）

#2

I made some other google maps like https://angular-maps.com/guides/getting-started/

我做了一些其他谷歌地图，如https://angular-maps.com/guides/getting-started/

Installation:-

安装：-

npm install @agm/core --save

app.module.ts file

app.module.ts文件

import { AgmCoreModule } from '@agm/core';
import { HttpModule} from '@angular/http';

imports: [  
    HttpModule,
    AgmCoreModule.forRoot({
      apiKey: 'Replace your api key here'
    })
  ],

Typescript file

打字稿文件

places:any[]=[]; //Declared variable,

 constructor(
    private http: Http
  ) {
        this.getJSON();
  }

public getJSON() {
    this.http.get("assets/file.json")
      .subscribe(response => {
        let temp = response.json();
        this.places = temp.locations;
        console.log("places", this.places);
      })
  }

Html file,

Html文件，

 <agm-map>
    <ng-container *ngFor="let place of places">
      <agm-marker [latitude]="place.latitude" [longitude]="place.longitude"></agm-marker>
    </ng-container>
  </agm-map>

Screenshot,

截图，

Note:- The marker has been properly marked. But initial view the map not zoom properly you have to zoom map and see marker pointed.

注意： - 标记已正确标记。但初始查看地图不能正确缩放你必须缩放地图并看到标记指向。

Here i made stackblitz Example,

在这里我做了stackblitz例子，

Note:- I declared hard code your value for location. You have to replace your api key in app.module.ts file,

注意： - 我将硬编码声明为您的位置值。你必须在app.module.ts文件中替换你的api密钥，

https://stackblitz.com/edit/angular-h8oi37

https://stackblitz.com/edit/angular-h8oi37

Screenshot,

截图，

I hope it's helpful.

我希望它有用。

Thanks,

谢谢，

Muthukumar

Muthukumar

#3

I just took a quick glance at this getting started guide, but it appears to me that your code should look like this:

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

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

However, do you get any additional errors?

但是，你有任何其他错误吗？

#4

Try this.

尝试这个。

HTML

HTML

<sebm-google-map-marker 
*ngFor="let m of markers; let i = index"
[latitude]="m.lat" [longitude]="m.lng" [label]="m.label">
</sebm-google-map-marker>

typescript

打字稿

markers: marker[] = [];

this.markers.push({
    lat: //val from server,
    lng: //Val from server,
    label: //title from server,
    draggable: false
});

#5

This is probably the case where the google map got loaded before data is provided. You can trigger the event in google maps to fix this issue . Something like the following :

这可能是在提供数据之前加载谷歌地图的情况。您可以在Google地图中触发事件来解决此问题。类似于以下内容：

import { SebmGoogleMap } from 'angular2-google-maps/core';

export class HomeComponent {
    @ViewChild(SebmGoogleMap) map: SebmGoogleMap;
    ngOnInit() {
        this.hawkerservice.fetchNews()
            .subscribe(
                data => { 
                    this.places = data.locations; 
                    this.map.triggerResize();
                },
                Error => console.log('this.places')
            );
    }     
 }