标记图标始终默认

Question

我正在使用 Leaflet 在离子应用程序中显示地图，我正在使用 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
  }
)

标记图标始终默认

Marker icon always default

javascript

leaflet

leaflet.markercluster