angularjs google maps – 带窗口的标记

尝试使用angular-google-maps获取应用：
– 通过markers指令的多个标记
– 通过window指令的单个infowindow

我已经通过API和git-hub网站上的多个已关闭的问题/问题,但是无法让它正常工作…： – /

为简单起见,我手动声明标记(并且它们正确显示)：

$scope.markers = [
    {
        id: 0,coords: {
            latitude: 37.7749295,longitude: -122.4194155
        },data: 'restaurant'
    },{
        id: 1,coords: {
            latitude: 37.79,longitude: -122.42
        },data: 'house'
    },{
        id: 2,coords: {
            latitude: 37.77,longitude: -122.41
        },data: 'hotel'
    }
];

html看起来像：

<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>

我正在使用此代码将onClick函数应用于markers数组

$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray,function(value,key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
};

标记点击功能看起来像

$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ',$scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};

$scope.onClick()函数似乎正在处理标记点击,因为控制台输出了预期的内容 – $scope.windowOptions.show值在true和false之间切换…

我认为这是我将窗口html连接到控制器数组和函数的方式？任何帮助表示赞赏.

附： API文档examples似乎已过时,因为它们不在示例中使用show,而是使用options.visible来显示和隐藏infowindows – 但是所有issues / examples建议使用show代替？

您的标记的绑定在window指令中是不正确的.

基本上,您需要在单击时将标记设置为选中,并将窗口绑定到所选标记.有关工作示例,请参阅jsfiddle.

<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

http://jsfiddle.net/gqkmyjos/

angularjs google maps – 带窗口的标记 – infowindow不显示

猜你在找的Angularjs相关文章