离子谷歌地图标记JSON不显示

Question

>与这个问题相关 来自JSON的离子谷歌地图标记

我有一个使用谷歌地图的离子应用程序。我正在尝试使用来自 json API 点的引脚标记填充地图，地图显示正确，但引脚未正确显示。

我相信我没有通过这些功能正确访问数据 -getMarkers()&addMarkersToMap()。我可以在控制台中看到数据没有问题console.log('my data: ', data);

您的帮助将不胜感激。

地点.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
}
]
}

位置.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/