2014-12-11 2 views
2

Я пробовал основные функции Листовки с Угловым. У меня есть следующий HTML фрагмент:В лифтовой карте нет пути

В контроллере, я сделал следующее:

$scope.markers = [ 
       { 
        lat: 52.5, 
        lng: 0, 
        focus: true, 
        //message: "Hey, drag me if you want", 
        title: "Marker", 
        draggable: true, 
        label: { 
         message: "Hey, drag me if you want", 
         options: { 
          noHide: true 
         } 
        } 
       }, 
       { 
        lat: 51, 
        lng: 0, 
        focus: true, 
        title: "Marker", 
        draggable: true, 
        label: { 
         message: "Hey, drag me if you want", 
         options: { 
          noHide: true 
         } 
        } 
       } 

      ]; 
$scope.europeanPaths = { 
       p1: { 
        color: 'red', 
        weight: 8, 
        latlngs: [ 
         { lat: 51.50, lng: -0.082 }, 
         { lat: 48.83, lng: 2.37 }, 
         { lat: 41.91, lng: 12.48 } 
        ], 
        message: "<h3>Route from London to Rome</h3><p>Distance: 1862km</p>", 
       } 
      }; 
$scope.london = { 
       lat: 51.505, 
       lng: -0.09, 
       zoom: 5 
      }; 

Маркеры красиво показать и карта получает по центру над Лондоном. Но путь не отображается. Когда я отлаживал директиву «paths», я обнаружил, что слой с координатами пути добавляется к карте.

Я довольно новый для Углового, поэтому стараюсь понять, как все работает за кулисами. ТИА.

(Я пытаюсь создать скрипку то же самое!)

+0

Пожалуйста, добавьте код, как вы настраиваете карту (добавьте маркеры, дорожки). – yarl

+0

Я использовал директиву листовки следующим образом: <листовки defaults = "defaults" center = "london" markers = "markers" paths = "europeanPaths" height = "240px" id = "areamap"> Согласно демонстрации на веб-сайте, посвященной листингу, это должно работать (если я не пропущу что-то!) –

+0

Выглядит хорошо для меня, проверьте [эту скрипку] (http://jsfiddle.net/a0hk935u/1/). Может быть, устаревшие библиотеки или вы добавляете их в неправильном направлении? – yarl

ответ

2

У меня была такая же проблема, и причина была в включены CSS в стиле

svg{ 
width: 100%; 
height: 100%; 
} 

Коррекция

.angular-leaflet-map svg{ 
    width: initial; 
    height: initial; 
} 

решить проблему

Смежные вопросы