ui-gmap-markers和图标可用于所有标记 [英] ui-gmap-markers and icon changeble for all mark

问题描述

我正在尝试使用ui-google-maps库的角度更改地图上每个标记的图标. $scope.map.options.icon工作，但初始化所有标记的图标.

I am trying to change icon for every markers on a map using ui-google-maps library for angular. $scope.map.options.icon working but initialize icon for all markers.

对于API，我有图标标签，但不起作用，或者我错过了某些地方.

For the API I have icon tags but not working or somewhere I miss something.

<ui-gmap-markers 
    idKey="map.dynamicMarkers.id" models="map.dynamicMarkers" 
    coords="'self'" onMarkerClicked="'onMarkerClicked'"
    fit="'true'" doCluster="'true'" clusterEvents="clusterEvents"
    options="map.options" icon="'icon'">
</ui-gmap-markers>

并在数据库中获取数据后，在dynamicMarkers对象列表中填充标记列表

and after get data in the database fill list of markers in the dynamicMarkers object list

  dynamicMarkers = $scope.allTrees;
  $scope.map.options.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png";

  _.each(dynamicMarkers, function (marker) {
      if (marker.status == 0) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png";
      } else if (marker.status == 1) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png";
      } else if (marker.status == 2) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png";
      }
  });

  $scope.map.dynamicMarkers = dynamicMarkers;

由于某种原因图标未更改.谢谢.

For some reason icon not change. Thanks.

推荐答案

我找到了解决方案！首先只需在marker.icon位置上设置图标url，而在map.options.icon上不设置默认图标. 如果您在map.options中设置了默认图标，然后尝试在无法使用的标记中设置图标！

I found solution! First need only set icon url on marker.icon place and not set default icon on map.options.icon. If you set default icon in map.options and after try to set icon inside the marker that will not work!

这是工作示例:

<ui-gmap-markers 
    idKey="map.dynamicMarkers.id" models="map.dynamicMarkers" 
    coords="'self'" onMarkerClicked="'onMarkerClicked'"
    fit="'true'" doCluster="'true'" clusterEvents="clusterEvents"
    options="map.options" icon="'icon'">
</ui-gmap-markers>

角度代码

dynamicMarkers = $scope.allTrees;
// not set default icon for the mark
// $scope.map.options.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png";

  _.each(dynamicMarkers, function (marker) {
      if (marker.status == 0) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png";
      } else if (marker.status == 1) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png";
      } else if (marker.status == 2) {
        marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png";
      }
  });

$scope.map.dynamicMarkers = dynamicMarkers;

这是一个成功的方法.我希望他们能在下一版的angular-google-maps库中修复该错误.我尝试使用angular-google-maps 2.1.5.亲爱的.

It is a catch and works. I hope they fix the bug in the next version of angular-google-maps library. I try with angular-google-maps 2.1.5. Chears.

这篇关于ui-gmap-markers和图标可用于所有标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！