Angular google 地图信息 window 图标不可点击

Question

我在 angular google 地图中遇到问题。

如下图所示，我在信息中有 2 个图标 window (<ui-gmap-windows show="show"></ui-gmap-windows>)。

我的DOM是这样的

<ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'>
                    <!--<ui-gmap-marker  idKey="marker.id" coords="marker.coords"></ui-gmap-marker>-->
                    <ui-gmap-markers models="markers" coords="'self'">
                        <ui-gmap-windows show="show">
                            <div ng-non-bindable>
                                <div>
                                    <label class="markerToolTipLabel">{{name}}</label>
                                    <div class="icons">
                                        <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                                        <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                                    </div>
                                </div>
                            </div>
                        </ui-gmap-windows>
                    </ui-gmap-markers>
                </ui-gmap-google-map>

我的控制器（glyphClick 函数）只是在做一个控制台日志。

但是当我点击图标时，控制台上没有任何输出。

可能是什么问题？？如何解决？

请帮忙！！

Answer 1

从您的代码中删除 ng-non-bindable。它正在阻止 angular 在其中附加监视功能。

<ui-gmap-windows show="show">
   <div >
       <div>
          <label class="markerToolTipLabel">{{name}}</label>
              <div class="icons">
                 <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                  <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
               </div>
           </div>
       </div>

Answer 2

显然是因为 glyphClick 在控制器作用域中声明的事件无法从 ui-gmap-windows 子作用域访问。

解决方案

首先我们需要引入一个额外的控制器：

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.glyphClick = function() {
        console.log('Button clicked!');
    }
});

然后为 ui-gmap-windows 指令指定以下布局：

 <ui-gmap-windows show="show">
                <div>
                    <div>
                        <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label>
                        <div class="icons" ng-controller="infoWindowCtrl">
                            <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                            <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                        </div>
                    </div>
                </div>
  </ui-gmap-windows>

Note: ng-non-bindable attribute is defined for a label

工作示例

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

    var getRandomLat = function() {
        return Math.random() * (90.0 + 90.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (180.0 + 180.0) - 180.0;
    };

    var createRandomMarker = function(i) {
        var ret = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            name: 'Location:' + i,
            show: false,
            id: i
        };
        return ret;
    };
    
    $scope.markers = [];
    for (var i = 0; i < 200; i++) {
        $scope.markers.push(createRandomMarker(i));
    }

});

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.glyphClick = function() {
        logInfo('Glyph clicked!');
    }
});


function logInfo(message){
   console.log(message);
   //document.getElementById('output').innerHTML += message;
  alert(message);
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="appMaps" id="map_canvas" ng-controller="mainCtrl">
  
    <ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'>
        <ui-gmap-markers models="markers" coords="'self'">
            <ui-gmap-windows show="show">
                <div>
                    <div>
                        <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label>
                        <div class="icons" ng-controller="infoWindowCtrl">
                            <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                            <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                        </div>
                    </div>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>
<pre id="output"></pre>

Plunker

Angular google 地图信息 window 图标不可点击

Angular google maps info window icons not clickable

javascript

google-maps

angularjs

angular-google-maps