AngularJS谷歌地圖指令

我正在嘗試創建一個Angular指令來顯示Google地圖。AngularJS谷歌地圖指令

這裏是我的指令：

'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初學者。

Regards

來源

2016-05-12 Bastien Alexandre

有很多可用的庫可讓您在Angular應用程序中使用Google地圖（如：https：//ngmap.github.io/）。 –

好吧，我發現它爲什麼不工作。

這是因爲如果scope.attribute等於false它永遠不會驗證if條件。

我修改了代碼如下：

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

希望這可以幫助別人之後。

Regards

來源

2016-05-13 14:45:30

AngularJS谷歌地圖指令

回答

相關問題