[英]Angular google maps info window icons not clickable
I'm facing an issue in angular google maps. 我在Google角形地图中遇到问题。
As shown in the image below, I'm having 2 icons in the info window ( <ui-gmap-windows show="show"></ui-gmap-windows>
). 如下图所示,我在信息窗口中有2个图标(
<ui-gmap-windows show="show"></ui-gmap-windows>
)。
My DOM is something like this 我的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>
And my controller (glyphClick function) is simply doing a console log. 我的控制器(glyphClick函数)只是在做一个控制台日志。
But when I click on the icons, I'm not getting any output on the console. 但是,当我单击图标时,控制台上没有任何输出。
What could be the issue?? 可能是什么问题?? How to solve this?
如何解决呢?
Please help!! 请帮忙!!
Apparently it occurs since glyphClick
event declared in controller scope that is not accessible from the ui-gmap-windows
child scope. 显然是由于无法从
ui-gmap-windows
子作用域访问控制器作用域中声明的glyphClick
事件而发生的。
Solution 解
First we need to introduce an additional controller: 首先,我们需要引入一个附加的控制器:
appMaps.controller('infoWindowCtrl', function($scope) {
$scope.glyphClick = function() {
console.log('Button clicked!');
}
});
and then specify the following layout for ui-gmap-windows
directive: 然后为
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注意:
ng-non-bindable
属性是为标签定义的
Working example 工作实例
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>
Remove ng-non-bindable
from your code. 从代码中删除
ng-non-bindable
。 It is preventing angular to attach watch functionality in it. 防止在其中附加手表功能。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.