使用ng-maps在标记点击上打开infowindow

Question

1 - 如何infowindow点击ng-maps点击marker？

2 - infowindow可以在marker之上，就像第二张地图一样吗？

包含两张地图的HTML文件（其中一张载有ng-maps，无法正常工作，另一张载有纯Google Maps API，按我的方式工作）：{ {3}}

Answer 1

1 根据infowindow指令的source code，信息窗口一旦呈现就会被打开，默认情况下没有选项可以隐藏它。为了防止此类行为，您可以使用ng-if directive：

<infowindow ng-if="infowindow.open" options="infoWindowOptions" position="map.center">
      <h4>Line One</h4> <br/> Line two <br /> Line three
</infowindow>


$scope.marker = {
        events: {
            click: function() {
                $scope.infowindow.open = true;
                $scope.$apply()
            }
        }
    }
    $scope.infowindow = {
        open: false
    }

2 可以使用pixelOffset property调整InfoWindow位置：

$scope.infoWindowOptions = function(){
        return { 
            pixelOffset: {height: -32, width:0 }
        };    
}


<infowindow ng-if="infowindow.open" options="infoWindowOptions" position="map.center">
      <h4>Line One</h4> <br/> Line two <br /> Line three
</infowindow>

示例

＆＃13;

＆＃13;

angular.module('App', ['ngMaps'])
    .controller('Main', function($scope) {
   

        $scope.map = {
            center: [14.9035822, -24.3588356],
            options: function() {
                return {
                    zoom: 10
                }
            },
        }
        $scope.marker = {
            events: {
                click: function() {
                    $scope.infowindow.open = true;
                    $scope.$apply()
                }
            }
        }
        $scope.infowindow = {
            open: false
        }

        $scope.infoWindowOptions = function(){
            return { 
                pixelOffset: {height: -32, width:0 }
            };    
        }
    });

＆＃13;

body,
html {
     margin: 0;
}
        
.google-map
{
     width: 500px;
     height: 500px;
     margin: 3em auto;
}

＆＃13;

<script src='https://maps.googleapis.com/maps/api/js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js'></script>
<script src='http://willleahy.info/ng-maps/bower_components/ng-maps/dist/ng-maps.js'></script>

<div ng-app='App' ng-controller="Main">
    <map ng-transclude class='google-map' center="map.center" options="map.options">
        <marker position="map.center" events="marker.events"></marker>
        <infowindow ng-if="infowindow.open" options="infoWindowOptions" position="map.center">
          <h4>Line One</h4> <br/> Line two <br /> Line three
         </infowindow>
    </map>
</div>

＆＃13;

＆＃13;

＆＃13;

作为旁注，我想提一下，Google地图目前有更多功能完整的实施，例如Angular Google Maps或angularjs-google-maps。