Ionic Google Maps Markers JSON不顯示

Question

關於這個問題JSON的Ionic Google Maps Markers

我有一個使用Google地圖的Ionic應用程序。 我正在嘗試使用JSON API點中的圖釘標記填充地圖，該圖顯示正確，但未顯示圖釘。

我相信我無法通過這些功能getMarkers()和addMarkersToMap()正確訪問數據。 我可以在控制台中看到數據，沒問題console.log('my data: ', data);

您的幫助將不勝感激。

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

}
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);
 this.getMarkers();
  }, (err) => {
    console.log(err);
  });
}
getMarkers() {
  this.http.get('json file')
  .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, name: marker.title});
    locations.setMap(this.map);
  }
}
}

json虛擬數據結構

{
  "message": "Successfully retrieved locator list.",
  "data": [
   {
      "Id": 160,
      "Name": "Bob Bob",  
      "Latitude": -36.299927, 
      "Longitude": 144.517076
   }
  ]
}

locations.html

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

Answer 1

嗯，json中的marker.title在哪里？

我想你可以這樣調試

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});
    console.log(marker);
    console.log(marker.title);
    console.log(position);
    console.log(locations);
    locations.setMap(this.map);
  }
}

並且您可能需要修復lat，lng標記的中心進行調試，

displayGoogleMap() {
  this.geolocation.getCurrentPosition().then((position) => {
  let latLng = new google.maps.LatLng(-36.299927, 144.517076); # fix current lat, lng for debug
  let mapOptions = {
    center: latLng,
    disableDefaultUI: true,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
 this.getMarkers();
  }, (err) => {
    console.log(err);
  });
}

---

為什么沒有控制台消息是json結構的原因是錯誤的。 也許您需要使用“ res.json（）。data”。 像這樣，

getMarkers() {
  this.http.get('json file')
  .map((res) => res.json().data)
                        // ^^^^^

Answer 2

問題在於此.map(res => res.json().data)添加.data以在我的json中獲取此屬性，我認為這是可觀察的嗎？ 從這里得到答案-https: //www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/