0

我正在使用这个项目（http://angular-google-maps.org/#!/）来使用 AngularJS。

在文档https://nlaplante.github.io/angular-google-maps/#!/api中说我需要使用窗口指令来显示信息。

我在标记内使用 window 指令。

当我点击标记时，它下面的窗口就会显示出来。

如果我单击第二个标记，则前一个窗口不会隐藏。

show 属性似乎没有与 isIconVisibleOnClick 结合，所以我找不到在显示新窗口时如何隐藏所有其他窗口。

这是我使用的代码：

myMapController.controller('MapController', [
'$scope',
'markerService',

function ( $scope, markerService ) {
var markerCollection = [];
$scope.options = {showWindow: false, window : {pixelOffset: new google.maps.Size(0, -30) , content: " - "  } };


angular.extend($scope, {
  map: {
    control: {},
    center: {
      latitude: 33.5,
      longitude: -112
    },
    zoom: 10,
    fit: true,
    visible: true,
    pan: true,
    options: {
      navigationControl: true,
      scaleControl: true
    }
  }
});

$scope.showWindow = function($index){
  for(var i = 0; 0 < $scope.markers.length; i++){
    $scope.markers[i].show =  false;
  }
};

$scope.verdad = false;

var setMapMarkers = function (){
  var markers = {};
  var index = 0;
  angular.forEach($scope.services, function (key) {
    var service = key.address;
    markerCollection.push(service);
    var serviceId = service.service.id;
    markers[index] = {
       coords: { "latitude": parseFloat(service.latitude), "longitude": parseFloat(service.longitude)},
       message: service.service.organization.name + "<br>" + service.phone,
       showWindow : false
    };
    index++;
  });
  $scope.markers = markers;

};
setMapMarkers();

} ]);

html

<google-map center='map.center' draggable='true' pan='true' zoom='map.zoom'>
        <layer type='TransitLayer'>
          <marker click='showWindow(m)' coords='m.coords' fit='true' idkey='$index' ng-repeat='m in markers'>
            <window isIconVisibleOnClick='true' options='{pixelOffset : options.window.pixelOffset}' show='m.show'>
              {{m.message}}
            </window>
          </marker>
        </layer>
      </google-map>

我感谢您的支持 ：）

4

1 回答 1

2

您可以跟踪前一个标记并在单击新标记时将其“showWindow”设置为“false”。

喜欢，

_.each($scope.mymarkers, function(marker) {
    marker.onClick = function() {
        $scope.$apply(function() {
            if(prevMarker) {
                prevMarker.showWindow = false;
            }
            marker.showWindow = true;
            prevMarker = marker;
        });
    }
});
于 2014-08-04T06:48:48.937 回答