невозможно показать несколько маркеров на карте в ионном 3 - PullRequest
Новая
       17

невозможно показать несколько маркеров на карте в ионном 3

0 голосов
/ 04 декабря 2018

Я пытаюсь показать несколько маркеров на моей карте Google в ionic3, но я получил эту ошибку ** Невозможно прочитать свойство 'длина' из неопределенного ** в моем home.ts, когда я пытаюсь получить долготу и широту изФайл JSON, и у меня есть значения долготы и широты в файле JSON, поэтому в нем нет проблем.Я не знаю, почему он выдает мне эту ошибку. Мой код Home.html 

<ion-content padding>

    <div #map id="map" width="100%" height="100%"></div>  

</ion-content>

, а мой код home.ts - 

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

declare var google;



@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage { 

  @ViewChild('map') mapContainer: ElementRef;
  map: any;
  museumList = [];



  constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation: Geolocation, public http: Http) {

     this.http.get('assets/data/museum.json')
    .map(res => res.json())
    .subscribe(data => {
        this.museumList = data.museums;
      },
      err => console.log("error is "+err), // error
      () => console.log('read museum data Complete '+ this.museumList) 
    );




  }


  ionViewDidLoad() {
    this.displayGoogleMap();
    this.getMarkers();
  }

  displayGoogleMap() {
    let latLng = new google.maps.LatLng(28.6117993, 77.2194934);

    let mapOptions = {
      center: latLng,
      disableDefaultUI: true,
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  }

  getMarkers() {
//i am getting error at this.museumList.lenght

    for (let _i = 0; _i < this.museumList.length ; _i++) {
      if(_i > 0 )
       this.addMarkersToMap(this.museumList[_i]);
    }
  }

  addMarkersToMap(museum) {
    var position = new google.maps.LatLng(museum.latitude, museum.longitude);
    var museumMarker = new google.maps.Marker({position: position, title: museum.name});
    museumMarker.setMap(this.map);
}

}

Ваша помощь будет принята с благодарностью Спасибо.

1 Ответ

0 голосов
/ 04 декабря 2018

Вы можете передать широту и долготу на контуре маркера. Это полный рабочий код отображения нескольких маркеров на карте 

loadMap(lat,long){

    let latLng = new google.maps.LatLng(lat, long);

    let mapOptions = {
      center: latLng,
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);


    var locations = [
      ['Sola', 23.0793864, 72.4921529],
      ['Shayona City', 23.0801729, 72.5360598],
      ['Axis Bank', 23.0808999, 72.5321389],
    ];

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: this.map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(this.map, marker);
        }
      })(marker, i));
    this.addMarker(this.map);
    }




  }



  addMarker(map:any){

    let marker = new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.DROP,
      position: map.getCenter(),
      draggable: true
    });

    let content = "<h4>You are here</h4>";

    this.addInfoWindow(marker, content);



    }
    addInfoWindow(marker, content) {

      let infoWindow = new google.maps.InfoWindow({
        content: content
      });

      google.maps.event.addListener(marker, 'click', () => {
        infoWindow.open(this.map, marker);
      });

      google.maps.event.addListener(marker, 'dragend', function (event) {
       console.log( this.getPosition().lat());
       console.log( this.getPosition().lng());

    });

    }
...