0
編集時にロードされません：はマップオブジェクトに直接これらの2つのメソッドを呼び出すと、問題を解決：地図は時々最初
leafletData.getMap().then(function(map)
{
map.invalidateSize();
map._onResize();
});
私は（AngularJS用リーフレットディレクティブで少し、まだかなり刺激性の問題を持っていますhttps://github.com/angular-ui/ui-leaflet）とGoogle Mapsプラグイン（https://github.com/shramov/leaflet-plugins）があります。
何らかの理由で、マーカーが問題なくロードされることがありますが、地図が表示されないことがあります。ウェブサイトを更新すると役立ちますが、それは解決策ではありません...添付
スクリーンショット（自分の携帯電話で撮影したが、それはあまりにもデスクトップブラウザで起こる）：一瞬の後に時々、マップのロード
しかし、無境界が設定された：それはのようになります（とほとんどの時間はありません）どのように
：
ビュー：
<div class="stations-map" ng-controller="mapCtrl" ng-show="mapObj.visible">
<leaflet layers="mapObj.layers" lf-center="mapObj.center" bounds="mapObj.bounds" markers="mapObj.markers" height="480px" width="100%"></leaflet>
</div>
コントローラ：任意の提案を事前にhttp://149.156.40.25/storm/
ありがとう：ウェブサイトへ
app.controller("mapCtrl", ['$scope', '$filter', 'propertyService', 'groupService', 'leafletBoundsHelpers', function ($scope, $filter, propertyService, groupService, leafletBoundsHelpers){
var properties = null;
var mapObj = {
center: {},
bounds: [],
markers: {},
layers: {
baselayers:
{
googleRoadmap: {name: 'Google Streets', layerType: 'ROADMAP', type: 'google'}
}
},
visible: false
};
var resetMap = function()
{
mapObj.center = {};
mapObj.bounds = [];
mapObj.markers = {};
};
var resetMapAndHide = function()
{
mapObj.center = {};
mapObj.bounds = [];
mapObj.markers = {};
mapObj.visible = false;
};
var setMarkerMessage = function(res,item,property)
{
var location = item.location.name;
var value = null;
var value_unit = null;
if(res.data[item.id] == undefined)
{
return "<div id='popup-container'><div id='popup-value'>-</div><div id='popup-location'>" + location + "</div></div>";
}
else if(properties[item.property].name == 'PM')
{
value = $filter('number')(res.data[item.id].value['PM2.5'], 2);
value_unit = " µg/m³";
return "<div id='popup-container'><div id='popup-value'>" + value + value_unit + "</div><div id='popup-location'>" + location + "</div></div>";
}
else if(properties[item.property].name == 'pressure')
{
value = $filter('number')(res.data[item.id].value[property.name]/100, 2);
value_unit = property.string_format.replace((/{(.*)}/.exec(property.string_format))[0],'');
return "<div id='popup-container'><div id='popup-value'>" + value + value_unit + "</div><div id='popup-location'>" + location + "</div></div>";
}
value = $filter('number')(res.data[item.id].value[property.name], 2);
value_unit = property.string_format.replace((/{(.*)}/.exec(property.string_format))[0],'');
return "<div id='popup-container'><div id='popup-value'>" + value + value_unit + "</div><div id='popup-location'>" + location + "</div></div>";
};
var setNorthE = function(northE,item)
{
if ((northE.lat == null) || (northE.lat < item.location.latitude))
{
northE.lat = item.location.latitude;
}
if ((northE.lng == null) || (northE.lng < item.location.longitude))
{
northE.lng = item.location.longitude;
}
};
var setSouthW = function(southW,item)
{
if ((southW.lat == null) || (southW.lat > item.location.latitude))
{
southW.lat = item.location.latitude;
}
if ((southW.lng == null) || (southW.lng > item.location.longitude))
{
southW.lng = item.location.longitude;
}
};
$scope.mapObj = mapObj;
propertyService.getProperties().then(function(response)
{
properties = response;
});
$scope.$on('group-chosen', function(event,id)
{
var groupData = null;
resetMap();
groupService.getGroupById(id).then(function(response)
{
return response.data;
}).then(function(response)
{
groupData = response;
return groupService.getGroupSensorValues(id);
}).then(function(response)
{
var groupProperty = properties[groupData.property.id];
var northE =
{
lat: null,
lng: null
};
var southW =
{
lat: null,
lng: null
};
var i = 0;
angular.forEach(groupData.sensors, function(item)
{
// add markers
if ((item.location.latitude !== null) && (item.location.longitude !== null))
{
mapObj.markers['m'+i] = {};
mapObj.markers['m'+i]['lat'] = item.location.latitude;
mapObj.markers['m'+i]['lng'] = item.location.longitude;
mapObj.markers['m'+i]['icon'] = {
type: 'div',
iconSize: [25,25],
className: 'divCircle'
};
mapObj.markers['m'+i]['getMessageScope'] = function()
{
return $scope;
};
mapObj.markers['m'+i]['message'] = setMarkerMessage(response,item,groupProperty);
mapObj.markers['m'+i]['compileMessage'] = true;
mapObj.markers['m'+i]['popupOptions'] = {
closeButton: false
};
}
setNorthE(northE,item);
setSouthW(southW,item);
i++;
});
var bounds = [];
var northEast = [];
var southWest = [];
// temporary map's padding
northEast.push(northE.lat+0.0001, northE.lng+0.0001);
southWest.push(southW.lat-0.0001, southW.lng-0.0001);
bounds.push(northEast,southWest);
mapObj.bounds = leafletBoundsHelpers.createBoundsFromArray(bounds);
});
mapObj.visible = true;
$scope.mapObj = mapObj;
});
$scope.$on('station-chosen', function()
{
resetMapAndHide();
$scope.mapObj = mapObj;
});
$scope.$on('data-switched', function()
{
resetMapAndHide();
$scope.mapObj = mapObj;
});}]);
リンク！
私はこのプラグインを知りませんが、私はシンプルなマップのgoogleで問題を抱えていました。 マップにはダイジェストサイクルを許可し、マップを正しくレンダリングできる$ scope.applyまたは$ timeoutが必要です – LorenzoBerti
Googleマップの場合の使用例を教えてください。 – Jakub