編輯加載:地圖對象這兩種方法直接調用解決了問題:地圖有時起初不
leafletData.getMap().then(function(map)
{
map.invalidateSize();
map._onResize();
});
我有單張指令對AngularJS一點,但相當刺激的問題( https://github.com/angular-ui/ui-leaflet)和Google地圖插件(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>
控制器:
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;
});}]);
鏈接到網站:http://149.156.40.25/storm/
在此先感謝您的任何建議!
我不知道這個插件,但我有簡單的地圖谷歌simil問題。 該地圖需要一個$ scope.apply或$ timeout,它允許一個摘要循環,並且可以正確呈現地圖 – LorenzoBerti
您可以向我提供一個使用Google地圖的例子嗎? – Jakub