Ионные маркеры Google Maps в формате JSON не отображаются

Связанный с этим вопросом Ионные маркеры 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>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
339
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

хм, а где в 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)
                        // ^^^^^

Спасибо. Я не получаю консольных сообщений в функциях addMarkersToMap (), это даже не до цикла for, я думаю. Однако с этой структурой json все работает отлично - stackoverflow.com/questions/51814808/… - это должно быть связано с передачей вложенного формата json

roshambo 14.08.2018 04:23

Ах да, извините, название должно быть Имя

roshambo 14.08.2018 04:25

Причина, по которой консольные сообщения не появляются, - это неправильная структура json. возможно, вам нужно использовать "res.json (). data".

EunChong Lee 14.08.2018 04:53
Ответ принят как подходящий

Проблема заключалась в том, что этот .map(res => res.json().data) добавлял .data, чтобы получить это свойство в моем json, которое, как я считаю, является наблюдаемым? Получил ответ отсюда - https://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/

Другие вопросы по теме