Question

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

我能够动态生成标记，但似乎无法绑定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/#!/

Answer 1

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

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

在ui-gmap-marker内显示窗口

您可以参考链接doc for window

Answer 2

您应该将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;
};

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

2 个答案: