编辑:直接在地图对象上调用这两个方法解决了这个问题:
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)的Leaflet指令,我有一点但非常恼人的问题。
出于某种原因,有时标记会加载而没有问题,但是没有显示地图。刷新网站有所帮助,但它不是一个解决方案...
附加截图(在我的手机上拍摄,但它也发生在桌面浏览器上):
有时地图会在片刻之后加载但没有设置边界:
它应该是什么样子(大部分时间都是这样):
查看:
<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/
提前感谢任何建议!
答案 0 :(得分:1)
我不知道这个插件但是当我遇到谷歌地图的问题时,我意识到这是一个调整大小的问题,所以我通过触发Resize事件解决了我的问题,也许这个例子可以帮助你
$scope.initializeMaps = function(test){
if(test.gps){
var arrLatLng = test.gps.split(',');
var latlng = new google.maps.LatLng(arrLatLng[0], arrLatLng[1]);
}else{
var latlng = new google.maps.LatLng(37.42224,-122.0883822);
}
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var input = document.getElementById('maps-input');
var searchBox = new google.maps.places.SearchBox(input);
map.addListener('click', function (e) {
placeMarker(e.latLng, map, test);
});
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
// THIS Is RESIZE EVENT THAT RENDER MAP
$timeout(function(){
google.maps.event.trigger(map, 'resize');
if (marker && test.marker) {
map.setCenter(marker.getPosition());
}
},1);
};
//};
var marker;
function placeMarker(location, map, test) {
$scope.$apply(function () {
test.gps = location.lat() + "," + location.lng();
});
if (marker && test.marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
test.marker = true;
};