如何更改传单指令上的默认图标引脚？

Question

我想知道是否可以更改默认图标（蓝色），在应用程序初始化时使用另一个自定义图标，我阅读了有关如何更改的信息，但我想要整个应用程序的自定义图标。

HTML

<div ng-controller="CustomizedMarkersController">
   <button type="button" class="btn btn-primary padright" ng-click="markers.m1.icon=icon" ng-repeat="(key, icon) in icons">{{ key }}</button>
   <leaflet markers="markers" center="lisbon"></leaflet>
</div>

JS

app.controller("CustomizedMarkersController", [ '$scope', function($scope) {
    var local_icons = {
       default_icon: {},
       leaf_icon: {
          iconUrl: 'examples/img/leaf-green.png',
          shadowUrl: 'examples/img/leaf-shadow.png',
          iconSize:     [38, 95], // size of the icon
          shadowSize:   [50, 64], // size of the shadow
          iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62],  // the same for the shadow
          popupAnchor:  [-3, -76] // point from which the popup should open         relative to the iconAnchor
       },
       div_icon: {
           type: 'div',
           iconSize: [230, 0],
           html: 'Using <strong>Bold text as an icon</strong>: Lisbon',
           popupAnchor:  [0, 0]
       },
       orange_leaf_icon: {
          iconUrl: 'examples/img/leaf-orange.png',
          shadowUrl: 'examples/img/leaf-shadow.png',
          iconSize:     [38, 95],
          shadowSize:   [50, 64],
          iconAnchor:   [22, 94],
          shadowAnchor: [4, 62]
       }
 };

angular.extend($scope, {
    icons: local_icons
});

angular.extend($scope, {
    lisbon: {
        lat: 38.716,
        lng: -9.13,
        zoom: 8
    },
    markers: {
        m1: {
            lat: 38.716,
            lng: -9.13,
            message: "I'm a static marker",
            icon: local_icons.default_icon,
        },
    },
    defaults: {
        scrollWheelZoom: false
    }
});
}]);

基于此示例。

Answer 1

从 传单文档，请参阅

Icon.Default

：

要更改默认图标，只需更改

L.Icon.Default.prototype.options

的属性（这是一组

Icon options

）。

例如，在代码中添加一行：

L.Icon.Default.prototype.options.iconUrl = 'myNewDefaultImage.png';

您可能还想更改视网膜显示器的阴影和 2x 图标，这些图标是使用选项

shadowUrl

和

iconRetinaUrl

设置的。

Answer 2

由于上述解决方案在使用Leaflet-1.7时对我不起作用， 我使用这种方法成功了：

L.Marker.prototype.options.icon = L.icon({
    iconUrl: "/path/to/markericon.png",
    shadowUrl: "/path/to/markershadow.png"
});

Answer 3

使用此代码自定义绘图插件

var drawPluginOptions = {
  position: 'topright',
  draw: {
    polyline: false,
    polygon: false,
    circle: false, // Turns off this drawing tool
    rectangle: false,
    circlemarker: false,
    marker: {
    title: "markerTest",
      icon: new MyCustomMarker()
    }
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

并添加到地图

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;
    
    /*if(layer.title == "Place hospital marker"){
        do this...
    }*/

  editableLayers.addLayer(layer);
});```

Answer 4

传单建议的实现此目的的方法是使用

mergeOptions

。我认为人们不应该直接破解

prototype

，正如这里许多答案中所述，因为我们正在覆盖库的内部结构，这可能有一天会改变。

L.Icon.Default.mergeOptions(icons)

对于

icons

来说：

icons = { // you can replace with your exact image paths
  iconUrl: 'media/images/marker-icon.png', 
  iconRetinaUrl: 'media/images/marker-icon-2x.png',
  shadowUrl: 'media/images/marker-shadow.png',
}

您可以参考图标文档，了解

Icon.default

中设置的

icons

上的所有可用选项。