0

我正在使用 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>'
  });

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

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

一旦显示在地图上，一切正常，除了我仍然有默认的标记图标。

有小费吗？

4

1 回答 1

2

仅通过查看代码，我相信右括号放错了位置：

markers.addLayer(L.marker([
  $scope.arrayOfVenues[i].latitude,
  $scope.arrayOfVenues[i].longitude
], {
    title: $scope.arrayOfVenues[i].name,
    riseOnHover: true,
    icon:myIcon
  }
)
于 2017-03-09T19:01:46.340 回答