Google为AngularJS映射-单击标记时未将InfoWindow设置在正确的位置

Question

我有一张使用AngularJS的Google Maps的地图，它有两个标记，每个标记都显示一个带数据的infoWindow。

第一次单击标记时，一切正常。 如果我单击第二个标记，仍然可以正常工作。 但是，当我再次单击第一个标记时，infoWindow不会更改其位置：与第一个标记关联的数据显示在infoWindow的第二个标记上方，而不是第一个标记上方。

什么会导致此问题？

我的html代码：

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'>
        <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers>
        <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak>
            //SOME CODE HERE
        </ui-gmap-window>
    </ui-gmap-google-map>

与标记关联的click事件：

$scope.map = { center: { latitude: 43, longitude: -8.3 }, zoom: 8, control: {}, markerEvents: {
    click: function(marker){
        if(marker.model.title != USER_LOCATION){
            $scope.onClick(marker.model);
            $scope.mapOptions.markers.selected = marker.model;
        }
    }
}, options: $scope.mapOptions};

windowOptions的内容：

$scope.windowOptions = {
    show: false,
    boxClass: "infobox",
    boxStyle: {
        backgroundColor: "transparent",
        border: "1px solid #C7CECE",
        borderRadius: "5px",
        width: "85%"
    },
    disableAutoPan: false,
    maxWidth: 0,
    infoBoxClearance: new google.maps.Size(1, 1),
    pixelOffset: new google.maps.Size(-175, -250),
    zIndex: null,
    /*closeBoxMargin: "10px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",*/
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};

如果我使用按钮“ x”关闭标记，则不会再发生此问题。 但是我不希望用户需要手动关闭infoWindow。

任何帮助，将不胜感激！ 谢谢

编辑：我包括我的mapOptions代码：

$scope.mapOptions = {
    minZoom: 3,
    zoomControl: false,
    draggable: true,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    disableDoubleClickZoom: false,
    keyboardShortcuts: true,
    markers: {
        selected: {}
    }
};

Answer 1

我无法重现您遇到的问题，但以下示例演示了如何在单击标记时显示信息窗口：

 angular.module('appMaps', ['uiGmapgoogle-maps']) .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { $scope.places = [ { idKey: 1, name: "Brisbane", coords: { latitude: -33.867396, longitude: 151.206854 } }, { idKey: 2, name: "Sydney", coords: { latitude: -27.46758, longitude: 153.027892 } }, { idKey: 3, name: "Perth", coords: { latitude: -31.953159, longitude: 115.849915 } } ]; var USER_LOCATION = ''; uiGmapGoogleMapApi.then(function(maps) { $scope.map = { center: { latitude: -30, longitude: 135.0 }, zoom: 4, control: {}, markerEvents: { click: function(marker) { if (marker.model.title != USER_LOCATION) { $scope.onClick(marker.model); $scope.mapOptions.markers.selected = marker.model; } } }, options: $scope.mapOptions }; $scope.windowOptions = { show: false, pixelOffset: new google.maps.Size(0, -32), /*boxClass: "infobox", boxStyle: { backgroundColor: "transparent", border: "1px solid #C7CECE", borderRadius: "5px", width: "85%" }, disableAutoPan: false, maxWidth: 0, infoBoxClearance: new google.maps.Size(1, 1), zIndex: null, isHidden: false, pane: "floatPane", enableEventPropagation: false*/ }; }); $scope.mapOptions = { minZoom: 3, zoomControl: false, draggable: true, navigationControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, disableDoubleClickZoom: false, keyboardShortcuts: true, markers: { selected: {} } }; $scope.onClick = function(data) { $scope.windowOptions.show = true; }; $scope.closeClick = function() { $scope.windowOptions.show = false; }; }); 

 .angular-google-map-container { height: 480px; } 

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script> <div ng-app="appMaps" ng-controller="mapCtrl"> <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'> <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers> <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak> Some info goes here </ui-gmap-window> </ui-gmap-google-map> </div>