[英]AngularJs leaflet directive map not rendering correctly on mobile with ionic
我最近开始放手Ionic,并使用Angular Leaflet Directive 。 显示的地理位置
一切都很好,但是我有一个我无法解决的问题。
一切都在PC上运行。
但在移动设备上,路径未显示,地图为灰色
我的主编
.controller('ShowCtrl', function($scope, $stateParams, $ionicLoading, $timeout, $http, leafletData) {
$ionicLoading.show({template: 'Downloading...'});
$scope.center = {};
$scope.paths = {};
$scope.markers = {};
$scope.defaults = {};
$scope.map = {};
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/'+$stateParams.id,
params: {
'client_id' : 'xxx',
'client_secret' : 'xxx',
'v' : '20130815',
}
}).then(function successCallback(data) {
$timeout(function () {
$scope.place = data.data.response.venue;
$scope.title = data.data.response.venue.name;
angular.extend($scope, {
center: {
lat: $scope.lat,
lng: $scope.long,
zoom: 12
},
paths: {
p1: {
color: '#ff612f',
weight: 5,
latlngs: [
{ lat: data.data.response.venue.location.lat, lng: data.data.response.venue.location.lng },
{ lat: $scope.lat, lng: $scope.long }
],
}
},
markers: {
destination: {
lat: data.data.response.venue.location.lat,
lng: data.data.response.venue.location.lng,
message: data.data.response.venue.name,
focus: true,
draggable: false,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon2.png',
}
},
mylocation: {
lat: $scope.lat,
lng: $scope.long,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon.png',
}
}
},
defaults: {
scrollWheelZoom: false,
zoomControl:false
}
});
$ionicLoading.hide();
}, 2000);
});
});
地图
<leaflet id="map" center="center" paths="paths" markers="markers" defaults="defaults"></leaflet>
可以请人帮我吗?
您正在使用哪个Cordova版本?
现在,最新版本强制使用cordova-plugin-whitelist 。 因此,您必须允许您发出的每个HTTP请求。
传单是从网上获取的,因此您必须允许它们。
为此的标准和推荐元是:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
只需将这一行添加到HTML的head
,它应该会更好地工作。
好的问题是我必须在ajax调用之前初始化tileLayer
像这样
$scope.defaults = { zoomControl: false, layerControl: false, tileLayer: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'};
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/'+$stateParams.id,
params: {
'client_id' : 'xxx',
'client_secret' : 'xxx',
'v' : '20130815',
}
}).then(function successCallback(data) {
$timeout(function () {
$scope.place = data.data.response.venue;
$scope.title = data.data.response.venue.name;
angular.extend($scope, {
markers: {
destination: {
lat: data.data.response.venue.location.lat,
lng: data.data.response.venue.location.lng,
message: data.data.response.venue.name,
focus: true,
draggable: false,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon2.png',
}
},
mylocation: {
lat: $scope.lat,
lng: $scope.long,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon.png',
}
}
}
});
$ionicLoading.hide();
}, 2000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.