2017-05-06 6 views
0

私はリーフレット+リーフレットディレクティブを使用していますが、私はあまりにも左または右にパンすると、私のジオジソンマーカーが含まれていないマップの新しいインスタンスを作成します。リーフレットパンニングですべてのマーカーがクリアされる

これは既知の問題ですか、私のコードの設定が間違っていますか?

http://imgur.com/a/T6Kfc

この問題が発生したおよび/またはそれを修正する方法を、なぜ誰もが知っています:

を(オンラインすべての問題を見つけることができませんでした)この1つはので、私はアルバムを作っ説明するのは難しいの一種でありますか?

ここでも注目すべき点は、さらに左にパンして「インスタンス3,4,5」などを入力すると、「インスタンス」にパンを戻すまではマーカーが表示されません1 "となる。

<div class="main" ng-controller="GeoJSONCenterController"> 

    <div class="container-fluid" id="map-canvas"> 
     <leaflet markers="markers" center="mapCenter" defaults="defaults" geojson="geojson"></leaflet> 
    </div> 

</div> 

コントローラーコード:デフォルトworldCopyJumpことで

app.controller("GeoJSONCenterController", [ '$scope', '$http', '$filter', 'leafletData', 'iconService', function($scope, $http, $filter, leafletData, iconService) { 

$scope.mapCenter = { 
    lat: 41.152194, 
    lng: 6.855469, 
    zoom: 3, 
}; 

$scope.defaults = { 
    attribution: "", 
    minZoom: 3, 
    maxZoom: 18 
}; 

$scope.icons = iconService.local_icons; 


// Get the geojson data from the USGS 
$http.get("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson").success(function(data, status) { 
    addGeoJsonLayerWithClustering(data); 
}); 

function addGeoJsonLayerWithClustering(data) { 
    var markers = L.markerClusterGroup(); 

    var geoJsonLayer = L.geoJson(data, { 
     pointToLayer: function(feature, latlng) { 
      marker = new L.marker(latlng, {icon: L.icon($scope.icons.quake_icon)}); 
      return marker; 
     }, 
     onEachFeature: function (feature, layer) { 
      var date = $filter('date')(feature.properties.time, "short"); 
       var popupContent = "<p><span class=" + "event-type" + ">" + feature.properties.type + ":</span> " + "<a href=" + feature.properties.url + " target=" + "_blank" + ">" + feature.properties.title + "</a>" + "<br><span class=" + "event-time" + "> Time: </span>" + date + "</span> " + "</p>"; 
       layer.bindPopup(popupContent); 
      } 
     }); 
     markers.addLayer(geoJsonLayer); 
     leafletData.getMap().then(function(map) { 
     map.addLayer(markers); 
     //map.fitBounds(markers.getBounds()); 
     }); 
    } 

} ]); 

答えて

関連する問題