Angular2 Google地图样式标记

Question

我们正在使用Angular2 Google地图（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完全一样，我需要一个带有标记的标签。当我以与样式地图相同的方式执行此操作时，我只能使用nativeMap访问getNativeMap()。但不是本土标记。

有什么想法吗？

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>

自定义地图标记是我创建的自定义组件。 我为你创造了要点。您将不得不切断不需要的代码部分，这也是为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