マーカーアイコンは常にデフォルト

Question

リーフレットを使用してイオンアプリで地図を表示していますが、https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markersを使用してクラスタリングを有効にしています。

私のカスタムアイコンが表示されないようですが、私はいつもブルーのデフォルトを取得しています。

まず、私はその後、私はアイコンを作成markerClusterGroup

var markers = L.markerClusterGroup({ 
    spiderfyOnMaxZoom: true, 
    showCoverageOnHover: true, 
    zoomToBoundsOnClick: true 
    }); 

を作成します。

var myIcon = L.icon({ 
     iconUrl: '<myiconurl.png>' 
    }); 

私は、私は地図上に表示する必要があるオブジェクトの配列をループによってマーカー配列を移入、ポップアップを各マーカーまでバインドします。

for (var i = 0; i < $scope.arrayOfVenues.length; i++) { 
    var name = $scope.arrayOfVenues[i].name; 
    var id = $scope.arrayOfVenues[i].venueID; 
    var image = $scope.arrayOfVenues[i].venueImageURL; 
    var distanceTo = "4 Miles Away"; 
    var popupContent = "<div style='height:200px;width:100%;position:relative;cursor:pointer;z-index:999999' nav-transition='ios' onclick='window.navDetails(" + id + ")'><img style='object-fit: cover;position:absolute;left:0;top:0;' height='200' width='100%' src='" + image + "'/><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:3vh;left:14px;font-size:3vh;'>" + name + "</h3><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:0;left:14px;font-size:2.5vh;'>" + distanceTo + "</h3></div>" 
    markers.addLayer(L.marker([ 
     $scope.arrayOfVenues[i].latitude, 
     $scope.arrayOfVenues[i].longitude, { 
     title: $scope.arrayOfVenues[i].name, 
     riseOnHover: true, 
     icon:myIcon 
     } 
    ]).bindPopup(popupContent, { 
     maxWidth: 300, 
     minWidth: 300, 
     minHeight: 300, 
     maxHeight: 300 
    })); 
    debugger 
    } 
    mymap.addLayer(markers); 

マップに表示されると、デフォルトのマーカーアイコンが残っていることを除いて、すべて正常に機能します。

ヒント？ただ、コードを見てから

Answer 1

、私は閉じ括弧を紛失されたと信じて：

markers.addLayer(L.marker([ 
    $scope.arrayOfVenues[i].latitude, 
    $scope.arrayOfVenues[i].longitude 
], { 
    title: $scope.arrayOfVenues[i].name, 
    riseOnHover: true, 
    icon:myIcon 
    } 
)