JSON的Ionic Google Maps Markers [英] Ionic Google Maps Markers from JSON

问题描述

我有一个使用Google地图的Ionic应用程序.我正在尝试使用json文件中的图钉标记填充地图，但是无法正常工作.此外，下一个练习我想从结构为"data"的api文件中获取pin映射标记:[{"json":json，...}] 您的帮助将不胜感激

I have a Ionic App using google maps. I am trying to populate the map with pin markers from a json file, however it is not working properly. Also the next exercise I would like to get the pin map markers from an api file with the structure "data" : [{ "json":json, ... }] Your help would be much appreciated.

Locations.ts

Locations.ts

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;
@Component({
  selector: 'page-locations',
  templateUrl: 'locations.html'
})
export class LocationsPage {

@ViewChild('mapContainer') mapContainer: ElementRef;
  map: any;
  constructor(public navCtrl: NavController,  public geolocation: Geolocation, private http: Http) {

}
ionViewDidLoad(){
  this.displayGoogleMap();
  this.getMarkers();
}
displayGoogleMap() {
  this.geolocation.getCurrentPosition().then((position) => {
  let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  let mapOptions = {
    center: latLng,
    disableDefaultUI: true,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

  }, (err) => {
    console.log(err);
  });
}
getMarkers() {
  this.http.get('assets/data/markers.json')
  .map((res) => res.json())
  .subscribe(data => {
    console.log('my data: ', data);
    this.addMarkersToMap(data);
  });
}
addMarkersToMap(markers) {
  for(let marker of markers) {
    var position = new google.maps.LatLng(marker.latitude, marker.longitude);
    var locations = new google.maps.Marker({position: position, title: marker.title});
    locations.setMap(this.map);
  }
}
}

markers.json

markers.json

[
{
  "latitude": 57.77504388,
  "longitude": 14.18557048,
  "name": "Kålgårdens rastgård"
},
{
  "latitude": 57.77474066,
  "longitude": 14.25457835,
  "name": "Öxnegården"
},
{
  "latitude": 57.7630705,
  "longitude": 14.0808624,
  "name": "Västersjön"
}
]

locations.html

locations.html

<ion-content>
    <div #mapContainer id="mapContainer"></div>
</ion-content>

推荐答案

我似乎已经知道了，我把this.getMarkers();放了进去.在displayGoogleMap(){的内部，因为它在负载中触发了

I seemed to have figured it out, I put this.getMarkers(); inside of displayGoogleMap() { function as it was firing off in the load

这篇关于JSON的Ionic Google Maps Markers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！