Question

我在角谷歌地图中遇到了问题。

如下图所示，我在信息窗口（<ui-gmap-windows show="show"></ui-gmap-windows>）中有2个图标。

我的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

显然，它发生在控制器作用域中声明的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>

注意：为标签
定义了ng-non-bindable属性

工作示例

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

Answer 2

从您的代码中删除 ng-non-bindable 。防止角度将手表功能附加在其中。

<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>

Angular谷歌地图信息窗口图标不可点击

2 个答案: