Angular Leaflet 自定义标记图标

【问题标题】：Angular Leaflet custom marker iconAngular Leaflet 自定义标记图标
【发布时间】：2023-12-30 17:03:01
【问题描述】：

我正在尝试使用自定义标记图标覆盖现有的默认标记图标。我在变量中定义了参数：

var ratIcon = L.icon({
    iconUrl: 'http://andywoodruff.com/maptime-leaflet/rat.png',
    iconSize: [60,50]
});

而图标是通过pointToLayer选项应用到的，该选项指定了一个函数：

pointToLayer: function(feature,latlng){
  return L.marker(latlng,{icon: leafIcon});
}

但仍有默认标记图标 -> Plunker 我做错了什么？

In the last example 是我要显示的内容。

【问题讨论】：

请参考这里的类似答案：*.com/a/26831200/4292656
谢谢@KyrosKoh，这是类似的答案，但不幸的是它仍然不起作用:(plunker
您正在定义ratIcon，但使用的是leafIcon

标签： angularjs leaflet geojson angular-leaflet-directive

【解决方案1】：

很抱歉，我帮不了你太多。我使用 AngularJS-Leaflet-Directive + Ionic Framework，这是我的示例代码的一部分（用于我的 2 张地图）供您参考：

var greenIcon;
var greenIcon2;

$scope.closeAddMarker = function()
  {
    $scope.modal.hide();
    $scope.clearFile();
    $scope.removeGreenIcon();
  }

  $scope.addMarker = function(locationEvent)
  {
    $scope.newLocation = new Location();
    $scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat;
    $scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng;

    var markerIcon = L.icon(
    {
      iconUrl: 'lib/leaflet/images/location-marker.png',
      shadowUrl: 'lib/leaflet/images/marker-shadow.png',
      iconSize:     [25, 41], // size of the icon
      shadowSize:   [41, 41] // size of the shadow
    });

    //check valid user

    if(localStorage.getItem("username"))
    {
      leafletData.getMap("map1").then(function(map1)
      {
        greenIcon = L.marker([Number($scope.newLocation.lat), Number($scope.newLocation.lng)], {icon: markerIcon}).addTo(map1);
      });

      leafletData.getMap("map2").then(function(map2)
      {
        greenIcon2 = L.marker([Number($scope.newLocation.lat), Number($scope.newLocation.lng)], {icon: markerIcon}).addTo(map2);
      });
    }

    $scope.modal.show();
  }

  $scope.removeGreenIcon = function()
  {
    leafletData.getMap("map1").then(function(map1)
    {
      if(greenIcon != null)
      {
        map1.removeLayer(greenIcon);
        greenIcon =null;
      }
    });

    leafletData.getMap("map2").then(function(map2)
    {
      if(greenIcon2 != null)
      {
        map2.removeLayer(greenIcon2);
        greenIcon2 =null;
      }
    });
  };

【讨论】：