ionische 2 dynamische Marker in Google Maps mit Profilbild

Question

Ich baue eine ionic2 Anwendung mit Tracking-Daten in der Datenbank gespeichert, ich kann Geolocation-Daten erhalten und eine Karte initialisieren, aber ich habe ein Array von markers mit profileimageurl und latlng Werte, ich versuche, um die Liste der Markierungen auf der Karte mit dem profileimageurl als Symbol zu bringen, aber es hat nicht funktioniert

Google map Init

initMap(): Promise<void> { 
let promise: Promise<void> = new Promise<void>((resolve, reject) => { 
    Geolocation.getCurrentPosition().then((position) => { 
    let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    let GooleMap = new google.maps.Map(document.getElementById('map'), { 
     center: latLng, 
     zoom: 18 
    }); 
    let marker = new google.maps.Marker({ 
     position: latLng, 
     map: GooleMap, 
     title: 'My Location', 
    }); 
    }); 
}); 
return promise; 
} 

Marker Array

markers: marker[] = [ 
    { 
     lat: 51.673858, 
     lng: 7.815982, 
     label: 'A', 
     profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG" 
    }, 
    { 
     lat: 51.373858, 
     lng: 7.215982, 
     label: 'B', 
     profileImage: "http://placekitten.com/90/90" 
    } 
] 

Ich bin ein Ergebnis so etwas wie dieses

erwartete ich eine Weile mit diesem gekämpft haben, würde ich schätzen sehr eine Antwort, Danke

Answer 1

ich google.maps.OverlayView außer Kraft setzen würde, füge es ein.

class CustomMarker extends google.maps.OverlayView { 
    marker: any; 
    clickListener: google.maps.MapsEventListener; 

    constructor(private latlng, map, private args) { 
    super(); 
    this.setMap(map); 
    } 

    draw() { 
    const panes = this.getPanes(); 
    let marker = this.marker; 

    if (!marker) { 
     marker = this.marker = document.createElement('div'); 
     marker.className = 'marker'; 

     let img = document.createElement('img'); 
     img.src = this.args.img; 
     marker.appendChild(img); 

     let point = this.getProjection().fromLatLngToDivPixel(this.latlng); 
     if (point) { 
     marker.style.left = (point.x - 50) + 'px'; 
     marker.style.top = (point.y - 50) + 'px'; 
     } 

     this.clickListener = google.maps.event.addDomListener(marker, "click", (event) => { 
     alert('You clicked on a custom marker!'); 
     google.maps.event.trigger(this, "click"); 
     }); 

     panes.overlayImage.appendChild(marker); 
    } 
    } 

    remove() { 
    if (this.marker) { 
     this.marker.parentNode.removeChild(this.marker); 
     this.clickListener.remove(); 
     this.marker = null; 
    } 
    } 

    getPosition() { 
    return this.latlng; 
    } 
} 

Plunker Example

P. S. Ich glaube, Sie haben @types/google-maps