折线angularjs setVisible:不是布尔值

时间:2015-03-26 18:47:09

标签: angularjs google-maps google-maps-api-3 polyline

我试图在我的地图应用程序中实现折线,我得到动力学latlng并将它们推入折线数组中,但是我得到的错误是我不知道原因:

错误:setVisible:不是布尔值

但是可见设置为true,它有什么问题?

var x = 0;
            $scope.enderecos.forEach(function (posicao) {
                $scope.markers.push({
                    id: x,
                    coords: {
                        latitude: parseFloat(posicao.latitude),
                        longitude: parseFloat(posicao.longitude)
                    }
                });

                $scope.polylines.push({
                    id: x,
                   path:[{
                       latitude: parseFloat(posicao.latitude),
                       longitude: parseFloat(posicao.longitude)
                   }],

                    stroke: {
                        color: '#6060FB',
                        weight: 4
                    },
                    editable: true,
                    draggable: false,
                    geodesic: false,
                    visible: true

                });
                x++;
            });

HTML:

<div class="angular-google-map-container">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events"
                        control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions"
                        closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>


        <ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"
                           geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
        </ui-gmap-polylines>


        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'"
                         events="markers.events"></ui-gmap-markers>
    </ui-gmap-google-map>
</div>

这是我完整的mapController:

.controller('MapController', function ($scope, uiGmapGoogleMapApi, $stateParams, uiGmapIsReady, ShowList) {

        var viagens_id = $stateParams.viagens_id;


        ShowList.enderecoViagem(viagens_id).then(function (listview) {
            $scope.enderecos = listview;


            $scope.MapOptions = {
                minZoom: 3,
                zoomControl: false,
                draggable: true,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                disableDoubleClickZoom: false,
                keyboardShortcuts: true,
                markers: {
                    selected: {}
                },
                styles: [{
                    featureType: "poi",
                    elementType: "labels",
                    stylers: [{
                        visibility: "off"
                    }]
                }, {
                    featureType: "transit",
                    elementType: "all",
                    stylers: [{
                        visibility: "off"
                    }]
                }]
            };

            uiGmapGoogleMapApi.then(function (maps) {

                maps.visualRefresh = true;
                $scope.googlemap = {};
                $scope.map = {
                    center: {
                        latitude: $scope.enderecos[0].latitude,
                        longitude: $scope.enderecos[0].longitude
                    },
                    zoom: 12,
                    pan: 1,
                    options: $scope.MapOptions,
                    control: {},
                    events: {
                        tilesloaded: function (maps, eventName, args) {
                        },
                        dragend: function (maps, eventName, args) {
                        },
                        zoom_changed: function (maps, eventName, args) {
                        }
                    }


                };
            });

            $scope.windowOptions = {
                show: false
            };

            $scope.onClick = function (data) {
                $scope.windowOptions.show = !$scope.windowOptions.show;
                console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
                console.log('This is a ' + data);
                //alert('This is a ' + data);
            };

            $scope.closeClick = function () {
                $scope.windowOptions.show = false;
            };

            $scope.title = "Window Title!";


            $scope.markers = [];
            $scope.polylines = [];

            var x = 0;
            $scope.enderecos.forEach(function (posicao) {
                $scope.markers.push({
                    id: x,
                    coords: {
                        latitude: parseFloat(posicao.latitude),
                        longitude: parseFloat(posicao.longitude)
                    }
                });

                $scope.polylines.push({
                    id: x,
                    path: [{
                        latitude: parseFloat(posicao.latitude),
                        longitude: parseFloat(posicao.longitude)
                    }],

                    stroke: {
                        color: '#6060FB',
                        weight: 4
                    },
                    editable: true,
                    draggable: false,
                    geodesic: true,
                    visible: true

                });
                x++;
            });

            $scope.addMarkerClickFunction = function (markersArray) {
                angular.forEach(markersArray, function (value, key) {
                    value.onClick = function () {
                        $scope.onClick(value.data);
                        $scope.MapOptions.markers.selected = value;
                    };
                });
            };

            uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
                .then(function (instances) {
                    console.log(instances[0].map); // get the current map
                })
                .then(function () {
                    $scope.addMarkerClickFunction($scope.markers);
                });


        });


    })

1 个答案:

答案 0 :(得分:1)

我认为您的错误就在这一行:

<ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
    </ui-gmap-polylines>

您将变量“可见”放在两个简单的引号“'”之间。这会将可见变量转换为可见的String。您正在评估字符串'visible',而不是布尔值true

试试这个:

<ui-gmap-polylines models="polylines" path="path" stroke="stroke" visible="visible"geodesic="geodesic" editable="editable" draggable="draggable" static="true">
    </ui-gmap-polylines>