如何更改 leaflet 指令上的默认图标 pin？

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

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

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