[英]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.