角度谷歌地图窗口没有显示

时间:2014-07-16 14:17:25

标签: javascript angularjs google-maps google-maps-api-3 angular-google-maps

除了轮询之外,当我手动将点添加到地图时,我无法显示窗口。只有预先填充了标记数组,它才会起作用。如果数组有预先填充的1个标记,然后我在地图加载后手动添加第二个标记,则第一个标记将显示窗口,但第二个标记不显示。它是具有不同lat / lng的相同标记。据我所知,我的代码几乎与这个plunker完全相同,因为我没有对数据进行轮询。

http://plnkr.co/edit/nbX0BIxNhxFrpzpruRWb?p=preview

http://54.210.49.244:4000/gMaps

个人网站我正在使用luls。是的,我太懒了,无法获得真正的域名。它是免费的,好的XD 证明了这个问题。不支持IE 9或更低版本。

这是控制器逻辑。

.controller("gMapsController", ["$scope", '$location', function($scope, $location){
    $scope.welcomeMessage = "Welcome to Google Maps Playground"

    $scope.map = {
        center: {
            latitude: 44.41748017333282,
            longitude: 26.106005249023376
        },
        zoom: 12
    }
    $scope.id = 0;
    $scope.map.bounds = {};
    $scope.map.randomMarkers = [{
        id: 0,
        latitude: 44.42138408826953,
        longitude: 26.25385948707207,
        showWindow: false,
        title: "m9"
    },
        {
        id: 1,
        latitude: 44.39138408826953,
        longitude: 26.21385948707207,
        showWindow: false,
        title: "m9"
    }];

    $scope.id++;
    $scope.id++;
    $scope.id++;

    angular.forEach($scope.map.randomMarkers, function(marker) {
        marker.showWindow = false;

        marker.onClick = function() {
            console.log('on click - opening window');
            marker.showWindow = true;
            $scope.$apply();
        }

        marker.closeClick = function() {
            console.log('close click - hiding window');
            marker.showWindow = false;
            $scope.$apply();
        }

        console.log(marker);

    });


    var generateMarkers = function(markers) {


        markers.showWindow = false;

        markers.onClick = function() {
                console.log('on click - opening window');
                markers.showWindow = true;
                $scope.$apply();
            };

        markers.closeClick = function() {
                console.log('close click - hiding window');
                marker.showWindow = false;
                $scope.$apply();
            };

            console.log(markers);


        $scope.map.randomMarkers.push(markers);

    };

    $scope.generateMarker = function(){
        var marker = {
            id: $scope.id,
            latitude: 44.41138408826953,
            longitude: 26.23385948707207,
            showWindow: false,
            title: "m9",
            draggable: true
        };
        console.log("marker added");
        generateMarkers(marker);
        $scope.id++;
    };

视图

div.container
    button(type = "button", ng-click="generateMarker()") Add a Marker
    div.row()
        div(class = "col-md-6")
            google-map(center="map.center", zoom="map.zoom", draggable="true", bounds="map.bounds", control="map.control")
                markers(models="map.randomMarkers", coords="'self'", icon="'icon'", click="'onClick'")
                    windows(show="'showWindow'", closeClick="'closeClick'", ng-cloak)
                        div
                            | Window with additional information

1 个答案:

答案 0 :(得分:0)

查看angular-google-maps的{​​{3}}:

issues似乎与您的问题相关(毕竟您的方法位于$scope)和https://github.com/nlaplante/angular-google-maps/issues/354