ionic 3 компонента Google Maps не ожидает загрузки карт - PullRequest
Новая
       1

ionic 3 компонента Google Maps не ожидает загрузки карт

0 голосов
/ 06 июня 2018

На основе https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/ Я строю приложение на Ionic 3 с картой и множеством маркеров (около 50).Карта загружается нормально, но маркеры не отображаются, если я выхожу и снова захожу на карту, я вижу их.

Я отладил код и, насколько я понимаю, при загрузке Google (this.initMap().then(() => { ...)карта еще не нарисована, поэтому, когда я создаю маркеры, они "падают в пустоту".Когда наконец карта готова, я не вижу никаких маркеров.Как я могу убедиться, что все загружено?

Спасибо 

    // PAGE: pages/page-maps/page-maps.ts

ionViewDidEnter(){
    .....
    let mapLoaded = this.maps.init(this.form,this.mapElement.nativeElement, this.pleaseConnect.nativeElement, this.viewCtrl.name).then(() => {
        this.filterEcosportelliMap(false);
    });
}

....
async filterEcosportelliMap(hideLoading = false, comune=null) {
    ....
    for (let location of this.ecosportelli) {
        if(location.comune_id!="0"){
            this.maps.addLocationMarker(location.latLng, location["id"], text, this.icon);

        }
    }
});


// PROVIDER: providers/google-maps/google-maps.ts

import { Injectable } from '@angular/core';
import { Platform, AlertController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { Connectivity } from '../connectivity/connectivity';
import { Geolocation } from '@ionic-native/geolocation';
import { Settings } from '../settings/settings';

declare var google : any;

@Injectable()
export class GoogleMaps {
    mapElement: any;
    pleaseConnect: any;
    map: any;
    mapInitialised: boolean = false;
    mapLoaded: any;
    mapLoadedObserver: any;
    currentMarker: any;
    apiKey: string = "123456879";
    form: any;
    pageName: any;
    markers = [];
    indirizzo: string = "";
    marker_pos = [0, 0];
    center_pos = [0, 0];

    infoWindow:any = null;

    constructor(
        public connectivityService: Connectivity,
        public geolocation: Geolocation,
        public alertCtrl: AlertController,
        public settings: Settings,
        private appSettings: Settings,
        private iab: InAppBrowser,
    ) { }

    init(form:any, mapElement: any, pleaseConnect: any, pageName: any): Promise<any> {
        this.center_pos = this.settings.center_pos;
        this.marker_pos = this.settings.marker_pos;
        this.mapElement = mapElement;
        this.pleaseConnect = pleaseConnect;
        this.form = form;
        this.pageName = pageName;
        return this.loadGoogleMaps();
    }

    loadGoogleMaps(): Promise<any> {
        return new Promise((resolve) => {
            if(typeof google == "undefined" || typeof google.maps == "undefined"){
                console.log("Google maps JavaScript needs to be loaded.");
                this.disableMap();
                if(this.connectivityService.isOnline()){
                    window['mapInit'] = () => {
                        this.initMap().then(() => {
                            console.log("loaded!!")
                            resolve(true);
                        });
                        this.enableMap();
                    }
                    let script = document.createElement("script");
                    script.id = "googleMaps";

                    if(this.apiKey!=""){
                        script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit&libraries=places';
                    } else {
                        console.log("no api key")
                        script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
                    }
                    document.body.appendChild(script);

                }
            } else {
                if(this.connectivityService.isOnline()){
                    this.initMap();
                    this.enableMap();
                } else {
                    this.disableMap();
                }
                console.log("loaded!!")
                resolve(true);
            }
            this.addConnectivityListeners();
        });
    }

    initMap(): Promise<any> {
        this.infoWindow = new google.maps.InfoWindow({content: ""});
        let parent = this;
        this.mapInitialised = true;
        return new Promise((resolve) => {
            let locationOptions = {timeout: 10000, enableHighAccuracy: true};
            this.geolocation.getCurrentPosition(locationOptions).then((position) => {
                let pos = [position.coords.latitude, position.coords.longitude]
                parent.form.controls.lat.patchValue(pos[0]);
                parent.form.controls.lng.patchValue(pos[1]);
                parent.paintMap(pos,pos);
            }, (err) => {
                let pos = parent.center_pos;
                parent.form.controls.lat.patchValue(pos[0]);
                parent.form.controls.lng.patchValue(pos[1]);
                parent.paintMap(pos,parent.marker_pos);
            });
            resolve(true);
        });
    }

    CenterControl(controlDiv, map) {
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.classList.add('centermap');
        controlUI.style.backgroundColor = '#1a4985';
        controlUI.style.border = 'none';
        controlUI.style.borderRadius = '100px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '22px';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Clicca per centrare la mappa';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(255,255,255)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '16px';
        controlText.style.lineHeight = '0px';
        controlText.style.paddingLeft = '20px';
        controlText.style.paddingRight = '20px';
        controlText.style.paddingBottom = '20px';
        controlText.style.paddingTop = '20px';
        controlText.innerHTML = '<img src="./assets/img/locate.png" style="width:24px;">';
        controlUI.appendChild(controlText);

        // Setup the click event listeners: simply set the map to Chicago.
        let parent = this;
        controlUI.addEventListener('click', function() {
          map.setCenter(new google.maps.LatLng(parent.center_pos[0],parent.center_pos[1]));
        });

      }

    paintMap(latLngCoordsCenter,latLngCoordsMarker): any {
        let latLng = new google.maps.LatLng(latLngCoordsCenter[0], latLngCoordsCenter[1]);
        let mapOptions = {
            center: latLng,
            zoom: 11,
            scrollwheel: false,
            gestureHandling: 'cooperative',
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        this.map = new google.maps.Map(this.mapElement, mapOptions);

        var centerControlDiv = document.createElement('div');
        var centerControl = this.CenterControl(centerControlDiv, this.map);

        //centerControlDiv.index = 1;
        //console.log(this.viewCtrl.name)
        if(this.pageName=="DistributoriPage" || this.pageName=="EcosportelliMapPage" || this.pageName=="EcopiazzoleMapPage"){
            //this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
            this.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
        }

        let latLngCoords = new google.maps.LatLng(latLngCoordsMarker[0], latLngCoordsMarker[1]);
        let marker = new google.maps.Marker({
            //icon: "img/locateme.png",
            optimized:  false,
            draggable:  true,
            animation:  google.maps.Animation.DROP,
            position:   latLngCoords,
            map:        this.map
        });

        let form = this.form;
        let map = this.map;

        google.maps.event.addListener(marker, "dragend", function() {
            form.controls.lat.patchValue(marker.getPosition().lat());
            form.controls.lng.patchValue(marker.getPosition().lng());
        });

        return(true);
    }

    resizeMap(){
        // console.log("oi",this.map.getCenter())
        // google.maps.event.trigger(this.map, "resize");
        //
        // this.map.setCenter(this.map.getCenter());
    }

    disableMap(): void {
        if(this.pleaseConnect){
            this.pleaseConnect.style.display = "block";
        }
    }

    addMarker(lat: number, lng: number, text: string, id: number, infoWindow: any, icon:string): void {
        //console.log(lat, lng, text, id, infoWindow, icon)
        let latLng = new google.maps.LatLng(lat, lng);
        let marker = new google.maps.Marker({
            map: this.map,
            icon: "./assets/img/"+(icon!=""?icon:"marker_ecosportello.png"),
            //icon: this.settings.serverAddressImg+(icon!=""?icon:"marker_ecosportello.png"),

            animation: google.maps.Animation.DROP,
            position: latLng
        });
        //console.log(marker);
        google.maps.event.addListener(marker,'click', function() {

            if (this.infoWindow) {
                this.infoWindow.close();
            }
            //this.infoWindow = new google.maps.InfoWindow();

            this.infoWindow.setOptions({position:latLng, content:text});
            this.infoWindow.open(this.map, marker);
        });
        this.markers.push(marker);
    }
    addLocationMarker(pos: any, id:number, text: string, icon: string): void {

        console.log(icon);
        let parent = this;
        let latLng = new google.maps.LatLng(pos[0],pos[1]);
        let marker = new google.maps.Marker({
            map: parent.map,
            visible: true,
            icon: "./assets/img/"+(icon!=""?icon:"marker_ecosportello.png"),
            //icon: this.settings.serverAddressImg+(icon!=""?icon:"marker_ecosportello.png"),

            animation: google.maps.Animation.DROP,
            position: latLng
        });

        text += '<br /><button class="infoWindowButton" data-lat="'+pos[0]+'" data-lng="'+pos[1]+'" id="tap_'+id+'"><ion-icon name="car"></ion-icon> Indicazioni stradali </button>';

        let parentInfowindow = this.infoWindow;
        google.maps.event.addListener(marker,'click', function() {
            if (parentInfowindow) {
                parentInfowindow.close();
            }
            parentInfowindow.setOptions({position:latLng, content:text});
            parentInfowindow.open(this.map, marker);
            document.getElementById('tap_'+id).addEventListener('click', (button) => {
                let browser = parent.iab.create('https://maps.apple.com/maps?q='+pos[0]+','+pos[1], '_system'); //For system browser, you'll be prompt to choose your browser if you have more than one
            });
        });

        this.markers.push(marker);
        //console.log(marker);
    }

    geoLocate(address){
        let parent = this;
        if(address!=""){
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode(
                { address: address, componentRestrictions: { country: 'IT' } }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    let pos = [results[0].geometry.location.lat(),results[0].geometry.location.lng()]
                    parent.form.controls.lat.patchValue(pos[0]);
                    parent.form.controls.lng.patchValue(pos[1]);
                    parent.paintMap(pos,pos);
                } else {
                    let alert = this.alertCtrl.create({
                        title: 'Indirizzo non trovato',
                        buttons: ['Ok']
                    });
                    alert.present();
                    parent.form.controls.lat.patchValue(parent.marker_pos[0]);
                    parent.form.controls.lng.patchValue(parent.marker_pos[1]);
                    parent.paintMap(parent.center_pos,parent.marker_pos);
                }
            });
        }else{
            let alert = this.alertCtrl.create({
                title: 'Il campo indirizzo è vuoto',
                buttons: ['Ok']
            });
            alert.present();
            parent.form.controls.lat.patchValue(parent.marker_pos[0]);
            parent.form.controls.lng.patchValue(parent.marker_pos[1]);
            parent.paintMap(parent.center_pos,parent.marker_pos);
        }
    }

    enableMap(): void {
        if(this.pleaseConnect){
            this.pleaseConnect.style.display = "none";
        }
    }

    addConnectivityListeners(): void {
        this.connectivityService.watchOnline().subscribe(() => {
            setTimeout(() => {
                if(typeof(google) === 'undefined' || typeof google.maps === 'undefined'){
                    this.loadGoogleMaps();
                } else {
                    if(!this.mapInitialised){
                        this.initMap();
                    }
                    this.enableMap();
                }
            }, 2000);
        });
        this.connectivityService.watchOffline().subscribe(() => {
            this.disableMap();
        });
    }

    gotoMap(latLng){
        //console.log("click")
        let browser = this.iab.create('https://maps.apple.com/maps?q='+latLng[0]+','+latLng[1], '_system'); //For system browser, you'll be prompt to choose your browser if you have more than one
    }
}

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Решено с помощью провайдера: 

google.maps.event.addListenerOnce(this.map, 'idle', function(){
    this.loadMarkers();
});

Я удалил отрисовку маркеров из функции initMap () и переместил ее в слушатель карты бездействия.Теперь появляются маркеры, так что, возможно, это правильный путь

0 голосов
/ 07 июня 2018

Извините за поздний ответ.Ваш сервис выглядит довольно сложным (для меня):).

Вы должны попробовать это, затем сопоставить это с функциями вашего сервиса (если это работает) 

 ionViewDidLoad() {
    this.initMap();
  }

initMap () function: 

initMap() {
      let mapOptions = {
        center: this.currentPosition,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      this.addMarkers();    // Add the markers in this function
  }

my mapElement: 

@ViewChild('map') mapElement: ElementRef;

в HTML: 

<div #map id="map-pick-location">

Пример AddMarkers() function 

addMarkers() {
    this.marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      draggable: true,
      position: {lat: -0000, lng: -0000} // latitude & longitude
    });
}

Надеюсь, это поможет вам!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...