2015-04-01 13 views
9

Ich kann keinen benutzerdefinierten Marker erstellen. Obwohl ich einen Bildpfad zum Icon-Parameter übergebe, erhalte ich immer noch die standardmäßige orange Markierung. Bitte sagen Sie mir, wenn Sie etwas falsch sehen.Angular Google Maps benutzerdefinierte Marker-Symbol

Richtlinie der Vorlage:

<div id="searchMap" class="googleMaps-destinations"> 
<div class="google-maps"> 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"> 
     <ui-gmap-marker 
      ng-repeat="marker in search.origin_airports" 
      coords="marker.originMarker.location" 
      icon="marker.originMarker.icon.url" 
      fit="false" 
      idkey="'<<marker.originMarker.id>>'" > 
     </ui-gmap-marker> 
    </ui-gmap-google-map> 
</div> 

ich verwende: //maps.googleapis.com/maps/api/js?v=3 & Sensor = true mit Winkel Google- maps/dist/eckig-google-maps.js

+0

Ich habe gerade bemerkt, dass ich nicht so gut Animationen verwenden können. – JKoder

Antwort

14

Verpasst, dass das Symbol ein Objekt ist.

icon= '{url: "//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" }' 
+0

das hat funktioniert. Aber ich glaube nicht, dass das, was der Doc sagt http://angular-ui.github.io/angular-google-maps/#!/api – Toolkit

12

Ich löste Symbol url durch die Optionen Eigenschaft vorbei

Set so etwas wie dieses auf Controller

marker.options: { 
    icon:'//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"' 
} 

und dann

<div id="searchMap" class="googleMaps-destinations"> 
    <div class="google-maps"> 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"> 
    <ui-gmap-marker 
     options="marker.options" 
     ng-repeat="marker in search.origin_airports" 
     coords="marker.originMarker.location"  
     fit="false" 
     idkey="'<<marker.originMarker.id>>'"> 
    </ui-gmap-marker> 
</ui-gmap-google-map> 

+0

Sieht aus wie dieses Problem, das Symbol durch den Optionen-Hash setzen zu müssen, wurde gemeldet: https://github.com/angular-ui/angular-google-maps/issues/1408 – ecbrodie

0

I s haben olved das benutzerdefinierte Symbol Problem prüfen mit PlunkerClick here

options: { draggable: false,  icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' } 

Html hier ist

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options"> 
     <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
     </ui-gmap-marker> 
    </ui-gmap-google-map> 
Verwandte Themen