Question

我正在尝试创建一个Angular指令来显示Google地图。

这是我的指示：

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

但是当我尝试设置布尔值时，它不会（我的控件保持不变）：

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

我可以说的最后一件事是，如果我直接在指令中将控件调整为false，它就会起作用，我的控件就会消失。

我在某处阅读是因为我必须将范围设置为“等于”，但情况已经如此：

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

有人可以帮助我作为angularjs的初学者。

此致

Answer 1

好的，我发现为什么它不起作用。

因为如果scope.attribute等于false，它将永远不会验证if条件。

我修改了代码如下：

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

希望这可以帮助别人。

此致

AngularJS GoogleMap指令

1 个答案: