Angular2 Google Maps Stil Marker

Question

Wir mit Angular2 Google Maps arbeiten (https://angular-maps.com/) ich die Styled Google Maps bereits mit diesem Plunkr bekommen haben zu arbeiten:

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

ich aber jetzt bin Ich suche genau dasselbe mit dem Marker, ich brauche ein Etikett mit meinem Marker. Wenn ich es so wie mit der styledMap mache, kann ich nur auf nativeMap mit getNativeMap() zugreifen. Aber nicht zu dem nativen Marker.

Irgendwelche Ideen?

Answer 1

Unter der Annahme, dass Sie https://github.com/SebastianM/angular2-google-maps Komponente verwenden, um mit google Maps zu arbeiten.

Da Google keine Marken mit Etiketten aus der Box unterstützt, habe ich benutzerdefinierte Komponente erstellt, die markerwithlabel js Bibliothek verwendet.

Erstellen Sie eine standardmäßige "Sebm" -Instanz und platzieren Sie eine benutzerdefinierte Markerkomponente darin.

Beispiel map.component.html Vorlage:

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

Wo custom-Karte-Marker meine benutzerdefinierte Komponente, die ich geschaffen habe. Ich habe Gist für Sie erstellt. Sie müssen nicht benötigte Teile des Codes abschneiden, und dies wurde auch für RC4 geschrieben, so dass Sie von eckigen RC5 Komponente in Modul umhüllen müssen.

Code of Kern:

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

Später konnte ich mit der Arbeit plnkr erstellen.

Ergebnis bereitgestellt Kern soll in etwa so aussehen:

Answer 2

Ich weiß nicht, welche Art von google map Sie verwenden, habe ich verwendet primeng GMap, wo Sie Ihre Markierung mit Markierungsoptionen wie diese

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

hier anpassen können Sie jede Art von Symbol asign können Marker to google sehen hier http://www.primefaces.org/primeng/#/gmap

Answer 3

hier ein Problem zu umgehen, von Google Maps API-Dokumentation kann das Etikett entweder ein String oder eine MarkerLabel Objektspezifikation werden, so dass anstelle der Verwendung string für label, spezifiziere das MarkerLabel-Objekt und führe es als Variable ein zB:

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