Angular Google Maps - 点击时不会打开窗口？答案

【问题标题】：Angular Google Maps - Window wont open on click?Angular Google Maps - 点击时不会打开窗口？
【发布时间】：2016-03-12 14:16:38
【问题描述】：

我正在尝试在我的 ionic 应用中实现谷歌地图。

我能够动态生成标记，但似乎无法绑定 infowindows。

$scope.arrayOfMarkers = [];
for (var i = 0 ; i < results.length ; i++) {
    var user = results[i];
    var mySID = JSON.parse(window.localStorage.getItem("userObject")).userProfileId;
    if (user.userProfileId != mySID) {
        var userCoords = {
            latitude: user.userProfileLatitude,
            longitude: user.userProfileLongitude
        };
    var markerOptions = {
        animation: "drop"
    }
    var thisMarker = {
        id:i,
        coords: userCoords,
        options: markerOptions,
        idKey: i,
        window: {
            show: false,
            title: "Test"
        }
}
$scope.arrayOfMarkers.push(thisMarker);
   }
}

HTML

<ui-gmap-google-map id="map" center="map.center" zoom="map.zoom">
                <ui-gmap-marker ng-repeat="marker in arrayOfMarkers" coords="marker.coords" options="marker.options"  events="marker.events" idkey="marker.id" window="marker.window">                
                </ui-gmap-marker>
            </ui-gmap-google-map>

当我单击标记时，没有任何反应。我应该如何实现窗口？

http://angular-ui.github.io/angular-google-maps/#!/

【问题讨论】：

你没有将arrayOfMarkers绑定到$scope$scope.arrayOfMarkers = arrayOfMarkers;范围内
我看了文档我想知道你从哪里使用窗口指令

标签： javascript angularjs google-maps ionic-framework

【解决方案1】：

您应该将ui-gmap-window 指令放在ui-gmap-marker 中，并在单击标记时调用函数。在我的示例中调用函数toggleInfoWindow() 就像click="toggleInfoWindow()"。它可以帮助你

<ui-gmap-google-map id="map" center="map.center" zoom="map.zoom">
     <ui-gmap-marker ng-repeat="marker in arrayOfMarkers" coords="marker.coords" options="marker.options" click="toggleInfoWindow()" events="marker.events" idkey="marker.id" window="marker.window">  
           <ui-gmap-window options="windowOptions">
                <div>{{title}}</div> //your information here
            </ui-gmap-window>              
     </ui-gmap-marker>
 </ui-gmap-google-map>

在控制器中添加toggleInfoWindow函数：

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

【讨论】：

非常感谢你拯救了我的理智！

【解决方案2】：

我查看文档没有找到window指令但是看看你能用什么

 <ui-gmap-windows show="{{window.show }}">
            <div ng-non-bindable>{{window.title}}</div>
 </ui-gmap-windows>

在ui-gmap-marker内显示窗口

你可以参考链接doc for window

【讨论】：