Angular谷歌地图自定义标记图标

Question

我无法创建自定义标记。即使我将图像路径传递给icon参数，仍然会得到默认的橙色标记。请告诉我是否有任何问题。

指令模板：

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

我正在使用：//maps.googleapis.com/maps/api/js?v=3&sensor=true，配合 angular-google-maps/dist/angular-google-maps.js。

//maps.googleapis.com/maps/api/js?v=3&sensor=true 配合 angular-google-maps/dist/angular-google-maps.js 使用。

- JKoder

---

我刚刚注意到我也不能使用动画。 - JKoder

Answer 1

错过那个图标是一个对象。

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

- JKoder

---

那个可行。但我不认为文档所说的是这样的 http://angular-ui.github.io/angular-google-maps/#!/api - Toolkit

Answer 2

我解决了通过选项属性传递图标URL的问题。

在控制器上设置类似于这样的内容。

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

然后

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

->

- Tiziano Zonta

---

看起来这个问题，需要通过选项哈希设置图标，已经被报告了：https://github.com/angular-ui/angular-google-maps/issues/1408 - ecbrodie

Answer 3

我已经解决了自定义图标的问题 请查看 plunker 点击这里

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

这里是HTML

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

- Karthikeyan G