来自 JSON 的离子谷歌地图标记答案

【问题标题】：Ionic Google Maps Markers from JSON来自 JSON 的离子谷歌地图标记
【发布时间】：2018-08-13 03:23:25
【问题描述】：

我有一个使用谷歌地图的 Ionic 应用程序。我正在尝试使用 json 文件中的 pin 标记填充地图，但是它无法正常工作。另外下一个练习我想从一个结构为"data" : [{ "json":json, ... }]的api文件中获取pin map标记，非常感谢您的帮助。

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

[
{
  "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

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

【问题讨论】：

那么您是否遇到错误或发生了什么？
谷歌地图出现并且没有错误。我的控制台正在吐出数据my data: Array(3) 0 : {latitude: 57.77504388, longitude: 14.18557048, name: "Kålgårdens rastgård"} 1 : {latitude: 57.77474066, longitude: 14.25457835, name: "Öxnegården"} 2 : {latitude: 57.7630705, longitude: 14.0808624, name: "Västersjön"} length : 3 __proto__ : Array(0)
好的，你能在 addMarkersToMap 方法中控制台记录“this”吗？
它给了我 LocationsPage 的类名和一大堆关于它的数据，我们正在那里寻找什么？
我好像想通了，我把 this.getMarkers();在 displayGoogleMap() {函数内部，因为它在加载时触发

标签： angular ionic-framework

【解决方案1】：

我好像想通了，我把 this.getMarkers();在 displayGoogleMap() {函数内部，因为它在加载时触发

【讨论】：