Integration mehrerer benutzerdefinierter Marker mit Ionic 2 + Google Maps

Question

Ich habe das Web seit Stunden durchsucht und kann das Problem scheinbar nicht zu meinem scheinbar einfachen Problem finden.

Einfach gesagt, die icon Eigenschaft von google.maps.Marker scheint nichts zu tun, wenn ich ionic serve die App, trotz allem anderen funktioniert gut.

Mit anderen Worten, was verwendet Ionic 2 mit der Google Maps Javascript API, die es ermöglicht, die Symbolbilder für benutzerdefinierte Markierungen zu definieren?

Ich werde alle meine relevanten Code hier zur Verfügung stellen, aber ich habe das Gefühl, dass es für eine Frage wie diese nicht sehr hilfreich sein könnte. Mit dem, was ich über Ionic 2 weiß, war ich in der Lage, Google Maps, seine Online-/Offline-Status und einige Standardmarkierungen in eine Seite meiner App zu integrieren.

BTW, meine Testbilddateien befinden sich im selben Ordner wie google-maps.ts (tun Sie dies nur für jetzt, wie ich herausfinden, was passiert).

Der gesamte Code zum Initialisieren von Google Maps und zum Erstellen der addMarker Funktionen befindet sich in dieser einen Datei (Dieser große Code ist hier nur für den Fall platziert, überspringe den Code unten zum nächsten Ausschnitt, um den relevantesten Abschnitt zu sehen it):

src/Anbieter/google-maps.ts

import { Injectable } from '@angular/core'; 
import { Connectivity } from './connectivity'; 
import { Geolocation } from 'ionic-native'; 

/* 
    Generated class for the GoogleMaps provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 

declare var google; 

@Injectable() 

export class GoogleMaps { 

mapElement: any; 
pleaseConnect: any; 
map: any; 
mapInitialised: boolean = false; 
mapLoaded: any; 
mapLoadedObserver: any; 
markers: any = []; 
apiKey: string; 
styles: any; 

    constructor(public connectivityService: Connectivity) { 

    } 

    init(mapElement: any, pleaseConnect: any): Promise<any> { 

    this.mapElement = mapElement; 
    this.pleaseConnect = pleaseConnect; 

    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(() => { 
       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'; 
      } else { 
       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(); 
      } 
     } 

     this.addConnectivityListeners(); 
     }) 
    } 

    initMap(): Promise<any> { 

    this.mapInitialised = true; 

    return new Promise((resolve) => { 

     Geolocation.getCurrentPosition().then((position) => { 

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     let mapOptions = { 
      center: latLng, 
      zoom: 15, 
     //mapTypeId: google.maps.MapTypeId.ROADMAP, -Doesn't seem necessary anymore 
      styles: [ 
    { 
    "featureType": "poi.business", 
    "stylers": [ 
     { 
     "visibility": "off" 
     } 
    ] 
    }, 
    { 
    "featureType": "road", 
    "elementType": "labels.icon", 
    "stylers": [ 
     { 
     "visibility": "off" 
     } 
    ] 
    }, 
    { 
    "featureType": "transit", 
    "stylers": [ 
     { 
     "visibility": "off" 
     } 
    ] 
    } 
] 
     } 

     this.map = new google.maps.Map(this.mapElement, mapOptions); 
     resolve(true); 
     }); 
    }); 
    } 

    disableMap(): void { 

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

    } 

    enableMap(): void { 

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

    addConnectivityListeners(): void { 

    document.addEventListener('online',() => { 

     console.log("online"); 

     setTimeout(() => { 

     if(typeof google == "undefined" || typeof google.maps == "undefined") { 
      this.loadGoogleMaps(); 
     } 
     else { 
      if(!this.mapInitialised) { 
      this.initMap(); 
      } 

      this.enableMap(); 
     } 

     },2000); 
    }, false); 
    } 

//Setting up custom Google Maps markers 

//iconBase: any = 'https://maps.google.com/mapfiles/kml/shapes/'; -Probably not necessary 


icons: any = { 
    partner: { 
    icon: 'partner.png' 
    }, 
    boughtFrom: { 
    icon: 'boughtFrom.png' 
    } 
} 

    addMarker(lat: number, lng: number, feature: any): void { 

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

    let marker = new google.maps.Marker({ 
     map: this.map, 
     animation: google.maps.Animation.DROP, 
     position: latLng, 
     icon: this.icons[feature].icon 
    }); 

    this.markers.push(marker); 

    } 

} 

der Teil, der für mich nicht funktioniert, ist die "Symbol" Zuordnung in dieser letzten "addMarker()" Funktion:

addMarker(lat: number, lng: number, feature: any): void { 

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

    let marker = new google.maps.Marker({ 
     map: this.map, 
     animation: google.maps.Animation.DROP, 
     position: latLng, 
     icon: this.icons[feature].icon //Doesn't do anything 
    }); 

    this.markers.push(marker); 

    } 

Zur Zeit versuche ich auch verschiedene Arten von Markern für verschiedene Standorte aufzurufen, aber selbst wenn ich es einfach durch partners.png oder { url: 'partners.img' } ersetze, erkennt es immer noch nichts.

Bei dieser Angelegenheiten, diese sind auch die beiden Testmarker ich, dass in Standardstil auf der Karte angezeigt werden:

src/assets/data/locations.json

{ 
    "locations": [ 

     { 
      "latitude": 40.79567309999999, 
      "longitude": -73.97358559999998, 
      "type": "partner" 
     }, 
     { 
      "latitude": 40.8107211, 
      "longitude": -73.95413259999998, 
      "type": "boughtFrom" 
     } 
    ] 
} 

ich werde auch die Karte Seite enthalten, die all diese Informationen integriert:

src/pages/home.ts

import { Component, ElementRef, ViewChild } from '@angular/core'; 
import { Locations } from '../../providers/locations'; 
import { GoogleMaps } from '../../providers/google-maps'; 
import { NavController, Platform } from 'ionic-angular'; 

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

export class HomePage { 

@ViewChild('map') mapElement: ElementRef; 
@ViewChild('pleaseConnect') pleaseConnect: ElementRef; 

    constructor(public navCtrl: NavController, public maps: GoogleMaps, 
       public Platform: Platform, public locations: Locations) { 

    } 

    ionViewDidLoad() { 

    this.Platform.ready().then(() => { 

     let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement); 
     let locationsLoaded = this.locations.load(); 

     Promise.all([ 
     mapLoaded, 
     locationsLoaded 
     ]).then((result) => { 

     let locations = result[1]; 

     for(let location of locations) { 
      this.maps.addMarker(location.latitude, location.longitude, location.type); 
     } 
     }) 
    }); 
    } 

} 

Vielen Dank für Ihre Zeit!

Alle und alle Hilfe wird geschätzt.

Answer 1

Mit anderen Worten, was verwendet Ionic 2 mit der Google Maps Javascript API, die es ermöglicht, die Symbolbilder für benutzerdefinierte Markierungen zu definieren?

Nichts. Ionic hat dafür keinerlei Verantwortung.

BTW, meine Testbilddateien befinden sich im selben Ordner wie google-maps.ts (mache das gerade erst, als ich herausfinde, was passiert).

Dies ist das Problem. Der Build-Prozess nimmt Typoskript-Dateien von einem Ort und kompiliert sie in einer einzigen Datei. Zum Erstellen von www/build/main.js.

Diese Bilder sind nicht dort mit der main.js Verschieben Sie Ihre Bilder in Assets Ordner und geben Sie den richtigen Pfad.

Zum Beispiel:

icon: 'assets/icon1.png'