google-maps - Angular2 谷歌地图样式标记

Question

我们正在使用 Angular2 谷歌地图 ( https://angular-maps.com/ ) 我已将样式化的 Google map 与此 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
      });
    });
  }
}

但是现在我希望对标记做完全相同的事情，我需要一个带有标记的标签。当我以与 styledMap 相同的方式执行此操作时，我只能使用 getNativeMap() 访问 nativeMap。但不是本地标记。

有什么想法吗？

Answer 1

假设您使用的是 https://github.com/SebastianM/angular2-google-maps与谷歌地图一起工作的组件。

由于 google 不支持开箱即用的标签标记，我创建了使用 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 编写的，因此从 angular RC5 开始，您必须将组件包装到模块中。

要点代码:

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

稍后我可以创建工作 plnkr。

提供的要点的结果应该是这样的: