2016-05-12 2 views
1

Я пытаюсь создать угловую директиву для отображения Карт Google.AngularJS Директива GoogleMap

Вот моя директива:

'use strict'; 

var CartoBundle = angular.module('CartoBundle', []); 

CartoBundle.directive('cartoBundleMap', function() { 

var map; 

return { 
    restrict: 'EA', 
    replace: true, 
    template: '<section id="map"></section>', 
    scope: { 
     zoom: "@", 
     zoomControl: "=", 
     fullScreenControl: "=", 
     mapTypeControl: "=", 
     scaleControl: "=", 
     streetViewControl: "=", 
     mapTypeId: "@" 
    }, 
    link: function(scope, element, attrs) { 

     var options = { 
      center: new google.maps.LatLng(46.52863469527167,2.43896484375), 
      zoom: 6, 
      zoomControl : true, 
      fullscreenControl : true, 
      mapTypeControl: true, 
      scaleControl: true, 
      streetViewControl: true, 
      mapTypeId: "hybrid" 
     }; 

     if (scope.zoom) options.zoom = scope.zoom * 1; 
     if (scope.zoomControl) options.zoomControl = scope.zoomControl; 
     if (scope.fullScreenControl) options.fullScreenControl = scope.fullScreenControl; 
     if (scope.mapTypeControl) options.mapTypeControl = scope.mapTypeControl; 
     if (scope.scaleControl) options.scaleControl = scope.scaleControl; 
     if (scope.streetViewControl) options.streetViewControl = scope.streetViewControl; 
     if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId; 

     map = new google.maps.Map(element[0], options); 
    }, 
}; 
}); 

Когда я делаю тест с помощью следующего HTML он отображает карту со всеми элементами управления (он работает):

<carto-bundle-map></carto-bundle-map> 

Кроме того, когда я пытаюсь также устанавливаются текстовые значения:

<carto-bundle-map 
    map-type-id="satellite" 
></carto-bundle-map> 

Но когда я пытаюсь установить значения булевых значений, это не так (мой con trols остается):

<carto-bundle-map 
    zoom-control="false" 
    full-screen-control="false" 
    map-type-control="false" 
    scale-control="false" 
    street-view-control="false" 
    map-type-id="satellite" 
></carto-bundle-map> 

Последние вещи, которые я могу сказать, что если я настроить элементы управления в ложь непосредственно в директиве он работает, и мои управления исчезают.

Я читал где-то, потому что я должен был установить областей с «равно», но это уже дело:

scope: { 
    zoom: "@", 
    zoomControl: "=", 
    fullScreenControl: "=", 
    mapTypeControl: "=", 
    scaleControl: "=", 
    streetViewControl: "=", 
    mapTypeId: "@" 
}, 

Может кто-нибудь помочь, как я новичок с angularjs.

С уважением

+0

Есть много доступных библиотеки, которые позволяют использовать Google Maps в вашем угловом приложении (например: https://ngmap.github.io/). –

ответ

0

Хорошо, я нашел, почему он не работал.

Это потому, что если scope.attribute равен false, он никогда не будет проверять условие if.

Я изменил код следующим образом:

if (!angular.isUndefined(scope.zoom)) options.zoom = scope.zoom * 1; 

Надеется, что это может помочь кто-то позже.

С уважением

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