Angular Leaflet自定义标记图标

问题描述：

我试图用自定义标记覆盖现有的默认标记图标。我已用可变定义的参数：Angular Leaflet自定义标记图标

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

In the last example是我想要展示的。

请参考这里的类似的答案： https://stackoverflow.com/a/26831200/4292656 –

谢谢@KyrosKoh，这是类似的答案，但不幸的是它仍然不起作用:([plunker]（http://plnkr.co/edit/fKb0YuQZeqen3peDBbaI?p=preview） – corry

您正在定义' ratIcon'，但使用'leafIcon' – Marc

答

对不起，我帮不了你。我用AngularJS小叶-指令+离子框架，这是我的我的示例代码部分（我的两张地图），供您参考：

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

Angular Leaflet自定义标记图标

相关推荐