ui-gmap-markers and icon changeble for all mark

问题:

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.

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>

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.

回答1:

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!

Here is the working example:

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

angular code

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;

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.