帶有個人資料圖片的Google地圖中的ionic 2動態標記

Question

我正在使用存儲在數據庫中的跟蹤數據構建ionic2應用程序，我能夠獲取地理位置數據並初始化地圖，但是我有一個帶有profileimageurl和lat lng值的markers數組，我試圖將標記列表放在帶有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;
  }
}

柱塞示例

PS我猜你已經安裝了@types/google-maps