AngularJS的Google Map - 单击标记时，InfoWindow未设置在正确的位置-Java 学习之路

我有一张使用Google Maps for AngularJS的 Map ，它有两个标记，每个标记显示一个带有数据的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: {}
    }
};

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>

回复于 2024-04-27T09:52:21+08:00

AngularJS的Google Map - 单击标记时，InfoWindow未设置在正确的位置

1 回答

相关问题