Неправильно отображается карта директивы AngularJs на мобильном телефоне с ионным

Question

Неправильно отображается карта директивы AngularJs на мобильном телефоне с ионным

0

Недавно я начал давать Ionic go, и я использую Angular Leaflet Directive. для отображения геолокации

Все в порядке, но у меня проблема, что я не могу решить.

Все работает на ПК.

Но на мобильном пути пути не отображаются, а карта серая

Мой котроллер

.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>

Может ли кто-нибудь дать мне руку?

Deurco 01 окт. 2015, в 15:12

Источник

Теги:

javascript

ionic-framework

angularjs

dictionary

directive

2 ответа

0

Какую версию Кордовы вы используете?

В недавней версии теперь используется использование 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 *">

Просто включите эту строку в head HTML, и она должна работать лучше.

Deurco 01 окт. 2015, в 11:16

0

попробую спасибо
user1130272 01 окт. 2015, в 14:48
0

Спасибо за ответ и извините за медленный ответ, но результат тот же
user1130272 02 окт. 2015, в 06:18
0

Хорошо, тогда вы можете использовать команду adb shell logcat | grep CONSOLE пока ваше устройство подключено к компьютеру через USB, чтобы узнать, что это за сообщение об ошибке, если оно есть?
Deurco 02 окт. 2015, в 08:31
0

спасибо, я сделаю это в следующий раз
user1130272 03 окт. 2015, в 06:13

Показать ещё 2 комментария

Ещё вопросы

Спасибо за ответ и извините за медленный ответ, но результат тот же
Хорошо, тогда вы можете использовать команду adb shell logcat | grep CONSOLE пока ваше устройство подключено к компьютеру через USB, чтобы узнать, что это за сообщение об ошибке, если оно есть?
спасибо, я сделаю это в следующий раз

user1130272 · Accepted Answer · 2015-10-03T04-40-00.000Z

Хорошо, проблема в том, что я должен был инициализировать tileLayer перед вызовом ajax

как это

$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);
    });