Angularjs uiGmapGoogleApi信息窗口不起作用?

时间:2015-05-19 06:11:13

标签: jquery angularjs google-maps google-maps-api-3 infowindow

我使用了uiGmapGoogleMapApi NOT WORKING 标记infowindow数组。你能帮助我吗?没有问题即将到来但没有工作

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="
                                onClick()" events="markers.events" >
                                    <ui-gmap-window options="windowOptions" closeClick="closeClick()">
                                        <div>{{title}}</div>
                            </ui-gmap-window>
                                </ui-gmap-markers>
    </ui-gmap-google-map>

Script.file

angular.module('appMaps', ['uiGmapgoogle-maps'])
    .controller('mainCtrl', function($scope, $log) {
        $scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 }
        $scope.options = {scrollwheel: false};
        $scope.markers = [{
            coords: {
                latitude: 40.1451,
                longitude: -99.6680
            },
            id: 0
        }
        ];

        $scope.windowOptions = {
            visible: false
        };

        $scope.onClick = function() {
            $scope.windowOptions.visible = !$scope.windowOptions.visible;
        };

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

        $scope.title = "Window Title!";
    });

Plunker Demo

1 个答案:

答案 0 :(得分:0)

我已经解决了我的问题。 Documenation

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" data-smart-map-instance="demoMap" options="options">

                                <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="
                                onClick()" events="markers.events" >

                                    <ui-gmap-windows show="show" closeClick="closeClick()">
                                         <div ng-non-bindable>{{id}}</div>
                                    </ui-gmap-windows>
                                </ui-gmap-markers>

                                </ui-gmap-google-map>

脚本文件

$scope.markers = []; 
   var data={
                                id: i,
                                coords: {
                                    latitude: 11.897890789,
                                    longitude: 78.6786876.lng
                                },
                                data: 'house'
                        };
                        $scope.markers.push(data);
$scope.map = {
                           center: {
                                latitude: $scope.markers[0].coords.latitude,
                                longitude: $scope.markers[0].coords.longitude
                            },
                        zoom: 9
                    };

                    $scope.options = {
                            scrollwheel: true,
                            disableDefaultUI: true,
                            zoomControl: true, 
                            scaleControl: true,
                           // streetViewControl: true
                    };