javascript - Angular Google map - 单击时窗口无法打开？

Question

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

我能够动态生成标记，但似乎无法绑定(bind)信息窗口。

$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/#!/

Answer 1

您应该将 ui-gmap-window 指令放入 ui-gmap-marker 中，并在单击标记时调用函数。在我的示例中，像 click="toggleInfoWindow()" 一样调用函数 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>

在 Controller 中添加toggleInfoWindow函数:

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