javascript - 如何更改传单指令上的默认图标图钉?

标签 javascript angularjs leaflet directive angular-leaflet-directive

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

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

Based on this example.

最佳答案

来自Leaflet documentation, see Icon.Default :

In order to change the default icon, just change the properties of L.Icon.Default.prototype.options (which is a set of Icon options).

例如,在您的代码中包含一行:

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

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

关于javascript - 如何更改传单指令上的默认图标图钉?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40414032/

相关文章:

javascript - 为什么添加的新列表项不显示在单独的行上?

javascript - 为什么 AngularJS 在 ng-repeat 中打印 "> "

javascript - 使用 geoJson 数据在传单弹出窗口中制作图表

leaflet - 使用带有 Canvas 渲染传单的自定义图标

javascript - 如何加速html5游戏

javascript - fetch() header 显示为 application/x-www-form-urlencoded 而不是 application/json

javascript - 根据符号向值动态添加类

javascript - Angular拖放——如何给onStart回调函数传递参数

angularjs - 如何在测试自定义 AngularJS 提供程序时注入(inject) $window?

javascript - Leaflet geosearch - 将结果标记绑定(bind)到现有标记