如何更改传单指令上的默认图标图钉？答案

【问题标题】：How to change the default icon pin on leaflet directive?如何更改传单指令上的默认图标图钉？
【发布时间】：2017-03-17 18:39:31
【问题描述】：

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

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>

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

Based on this example.

【问题讨论】：

标签： javascript angularjs leaflet directive angular-leaflet-directive

【解决方案1】：

来自Leaflet documentation, see Icon.Default：

要更改默认图标，只需更改L.Icon.Default.prototype.options 的属性（即Icon options 的集合）。

例如，在您的代码中包含一行：

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

您可能还想更改 Retina 显示器的阴影和 2x 图标，它们是通过选项 shadowUrl 和 iconRetinaUrl 设置的。

【讨论】：

我刚刚找到了这个答案，没有人接受这个作为正确答案，所以我会的。此示例脚本使用我的自定义新图标更新了默认图标以替换默认图标。谢谢user2441511。
我想隐藏图标，因为只要您处于编辑模式，Leaflet-Draw 插件就会使用它。将这些变量设置为null 会显示损坏的图像。如果要完全隐藏图标，可以设置L.Icon.Default.prototype.options.iconSize = [0, 0]; 和L.Icon.Default.prototype.options.shadowSize = [0, 0];

【解决方案2】：

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

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

【讨论】：