Google地图中的离子2个动态标记，包含个人资料图片

Question

我正在构建一个带有跟踪数据存储在数据库中的ionic2应用程序，我能够获取地理位置数据并初始化一张地图，但我有一个markers和profileimageurl和latlng值，我试图把与profileimageurl作为图标在地图上标记的名单，但没有奏效

谷歌地图初始化

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; 
} 

标记阵列

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" 
    } 
] 

我期待的结果是这样的

我一直在挣扎了一会儿，我将非常感激的答案，谢谢

Answer 1

我会覆盖google.maps.OverlayView到执行它。

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

附：我想你已经安装@types/google-maps