Question

我正在使用Leaflet在离子应用中显示地图，我使用https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers来启用群集。

我似乎无法显示我的自定义图标，但我总是得到蓝色默认值。

首先我创建markerClusterGroup

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

然后我创建了Icon：

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

然后我通过循环遍历我需要在地图上显示的对象数组来填充标记数组，并绑定一个pop [直到每个标记。

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

标记图标始终默认

1 个答案: