角度谷歌地圖信息窗口圖標不可點擊

如下圖所示，我在信息窗口中有兩個圖標（<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功能）簡單地做一個控制檯日誌。

但是，當我點擊圖標，我沒有得到控制檯上的任何輸出。

可能是什麼問題？如何解決這個問題？

請幫忙!!

來源

2016-02-25 Sunil Kumar B M

能否請您添加plnkr或代碼的任何小提琴？ –

顯然，它因爲在控制範圍內聲明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屬性是爲al定義的阿貝爾

工作實例

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

來源

2016-02-26 09:18:56

謝謝..這工作得很好:-) –

這真的很好。但是如果我想將名稱作爲glyphClick函數的參數傳遞給我呢？這是行不通的。有沒有解決辦法？ –

從您的代碼中刪除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>

來源

2016-02-25 14:08:16

如果我刪除ng-non-bindable屬性，我看不到文字，只有圖標會出現。 –

請問您可以添加任何plnk –

角度谷歌地圖信息窗口圖標不可點擊

回答

相關問題