1

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

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 我做错了什么？

在最后一个例子中是我想要展示的。

4

1 回答 1

1

对不起，我帮不了你太多。我使用 AngularJS-Leaflet-Directive + Ionic 框架，这是我的示例代码的一部分（用于我的 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;
      }
    });
  };
于 2015-09-19T16:16:27.263 回答