Связанный с этим вопросом Ионные маркеры Google Maps из JSON
У меня есть приложение Ionic, использующее карты Google. Я пытаюсь заполнить карту маркерами контактов из точки json API, карта отображается правильно, но не контакты.
Я считаю, что не получаю должного доступа к данным с помощью этих функций - getMarkers() и addMarkersToMap(). Я вижу данные в консоли без проблем console.info('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.info(err);
});
}
getMarkers() {
this.http.get('json file')
.map((res) => res.json())
.subscribe(data => {
console.info('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
}
]
}
location.html
<ion-content>
<div #mapContainer id = "mapContainer"></div>
</ion-content>





хм, а где в 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.info(marker);
console.info(marker.title);
console.info(position);
console.info(locations);
locations.setMap(this.map);
}
}
и вам может потребоваться исправить широту, центр маркера 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.info(err);
});
}
Причина, по которой консольные сообщения не появляются, - это неправильная структура json. возможно, вам нужно использовать "res.json (). data". нравится,
getMarkers() {
this.http.get('json file')
.map((res) => res.json().data)
// ^^^^^
Ах да, извините, название должно быть Имя
Причина, по которой консольные сообщения не появляются, - это неправильная структура json. возможно, вам нужно использовать "res.json (). data".
Проблема заключалась в том, что этот .map(res => res.json().data) добавлял .data, чтобы получить это свойство в моем json, которое, как я считаю, является наблюдаемым? Получил ответ отсюда - https://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/
Спасибо. Я не получаю консольных сообщений в функциях addMarkersToMap (), это даже не до цикла for, я думаю. Однако с этой структурой json все работает отлично - stackoverflow.com/questions/51814808/… - это должно быть связано с передачей вложенного формата json