使用ng-maps在標記點擊上打開信息窗口

Question

1-如何使用ng-maps在marker單擊上打開infowindow ？

2- infowindow可以像第二張地圖一樣位於marker頂部？

帶有兩個地圖的HTML文件（一個加載了ng-maps， 不能按我的要求運行 ，另一個使用純Google Maps API，可以按我的要求運行 ）： github gist 。

Answer 1

1根據infowindow指令的源代碼 ，信息窗口在呈現infowindow會打開，默認情況下沒有使其隱藏的選項。 為了防止這種行為，您可以使用ng-if指令 ：

<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 InfoWindow的位置可以使用pixelOffset屬性進行調整：

$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>

例

 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 } }; } }); 

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

 <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> 

附帶一提，我想提及的是，目前有更多針對Google Maps的功能完整的實現，例如Angular Google Maps或angularjs-google-maps 。