Question

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

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});
}

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

In the last example是我想展示的。

Answer 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;
      }
    });
  };

Angular Leaflet自定义标记图标

1 个答案: