Question

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

对于API，我有图标标签，但没有工作或某处我想念的东西。

<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对象列表中的标记

  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;

由于某种原因，图标不会改变。感谢。

Answer 1

我找到了解决方案！首先只需在marker.icon地方设置图标网址，在map.options.icon上设置未设置默认图标。如果您在map.options中设置默认图标，并在尝试在标记内设置图标后无效！

以下是工作示例：

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

所有标记的ui-gmap标记和图标都可以更改

1 个答案: