Angular2 Google地圖樣式標記

Question

我們正在使用Angular2 Google Maps（ https://angular-maps.com/ ）我已經使用了Styled Google Maps來使用這個Plunkr：

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

@Directive({
  selector: 'styled-map'
})

export class StyledMap {

  constructor(private _wrapper: GoogleMapsAPIWrapper) {

    this._wrapper.getNativeMap().then((m) => {

      let stylesArray : any = [
         /* your styles here */
      ];

      m.setOptions({       
        streetViewControl: false, 
        styles: stylesArray
      });
    });
  }
}

但是現在我希望與Marker完全一樣，我需要一個帶有標記的標簽。 當我使用與styledMap相同的方式時，我只能使用getNativeMap()訪問nativeMap 。 但不是本土標記。

有任何想法嗎？

Answer 1

假設您使用https://github.com/SebastianM/angular2-google-maps組件來處理谷歌地圖。

由於谷歌不支持標簽開箱即用，我創建了使用markerwithlabel js庫的自定義組件。

創建默認的“sebm”實例並在其中放置自定義標記組件。

map.component.html模板的示例：

<sebm-google-map
        [latitude]="lat"
        [longitude]="lng"
        [zoom]="zoom"
        [disableDefaultUI]="true"
        [zoomControl]="false"
        [streetViewControl]="false">

    <custom-map-marker
        *ngFor="let cluster of clusters; let i = index"
        [markersInCluster]="cluster.markers"
        [addressId]="cluster.address_id"
        [lat]="cluster.coordinates.lat"
        [lng]="cluster.coordinates.lng"
        [label]="cluster.price.raw"
        [isViewed]="true"
        (markerClick)="onMarkerClick($event)">
    </custom-map-marker>

</sebm-google-map>

custom-map-marker是我創建的自定義組件。 我為你創造了要點。 您將不得不切斷不需要的代碼部分，這也是為RC4編寫的，因此從角度RC5開始，您必須將組件包裝到模塊中。

要點：

https://gist.github.com/.../5e00519712fddb8ce206091a5a60e0f3

后來我可以創建工作plnkr。

提供的要點的結果應該如下所示：

Answer 2

這是一個解決方法，從谷歌地圖API文檔，標簽可以是字符串或MarkerLabel對象規范，因此不要使用字符串作為標簽，指定MarkerLabel對象並將其作為變量提供，例如：

let markerLabelObject = {
color: "red",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
text: element.names
}
this.markers.push({
lat: element.latitude,
label: markerLabelObject, //<<----the object you defined 
lng: element.longitude
})

Answer 3

我不知道你正在使用哪種類型的谷歌地圖，我使用了primeng GMap，你可以用這樣的標記選項自定義你的標記

new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti", icon: icon})

在這里你可以將任何類型的圖標指向google標記，請點擊此處http://www.primefaces.org/primeng/#/gmap