javascript - Angular 谷歌地图窗口不显示

Question

除了轮询之外，当我手动向 map 添加点时，我无法显示窗口。只有预先填充标记数组才有效。例如，如果数组预先填充了 1 个标记，然后我在 map 加载后手动添加第二个标记，则第一个标记将显示窗口，但第二个标记不会显示。这是具有不同纬度/经度的相同标记。据我所知，我的代码几乎与这个骗子相同，除了我不轮询数据。

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

http://54.210.49.244:4000/gMaps

我用来娱乐的个人网站。是的，我懒得去获得一个真正的域名。免费的，好吧XD 说明了问题。不支持 IE 9 或更低版本。

这是 Controller 逻辑。

.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

Answer 1

查看 issues Angular 谷歌地图:

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