ui-gmap-markers and icon changeble for all marks

Question

我正在尝试使用 ui-google-maps 库为 angular 更改地图上每个标记的图标。 $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 = $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处设置图标url，在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>

angular代码

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。吃鸡。

ui-gmap-markers and icon changeble for all marks

ui-gmap-markers and icon changeble for all mark

angularjs

google-maps

angular-ui

angular-google-maps