Google 地图 - 标签信息 window 问题

Question

我在两个选项卡中使用 ng 地图。加载时显示带有两个选项卡地址的标记。如果一旦标记在控制台中显示错误。我正在尝试但无法修复。 Onload 我想显示带有 (info window) 两个选项卡地址的标记。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
    <script>
        angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngMap']);
        angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window, $timeout) {
           this.address = "Toronto Canada";

           $scope.reRednerMap = function() {
            $timeout(function() {
                angular.forEach($scope.maps, function(index) {
                    google.maps.event.trigger(index, 'resize');
                });
            }, 500);
        }
        $scope.maps = [];
        $scope.$on('mapInitialized', function(evt, evtMap) {
            $scope.maps.push(evtMap);
        });
        $scope.reRednerMap();
        });
    </script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">

  <uib-tabset active="active">
    <uib-tab index="0" heading="tab 1" select="reRednerMap()">
        <ng-map center="13.0222427,80.1745555"" zoom="12" style="width:600px; height:400px">
                <marker position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar1')">
                </marker>
                 <info-window id="bar1">
                    <div ng-non-bindable>
                        <div>channi Tamil nadu</div>
                    </div>
                </info-window>
            </ng-map>

    </uib-tab>
   <uib-tab index="1" heading="tab 2" select="reRednerMap()">
        <ng-map center="13.0222427,80.1745555"" zoom="12" style="width:600px; height:400px">
                <marker id="current_marker" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar')">
                </marker>
                 <info-window id="bar">
                    <div ng-non-bindable>
                        <div>channi CMBT</div>
                    </div>
                </info-window>
            </ng-map>

   </uib-tab>

  </uib-tabset>


</div>
  </body>
</html>

Answer 1

使用以下语法：

map.showInfoWindow('bar1', 'marker1');

打开信息window，其中

bar1 - 信息的 id window 元素
marker1 - 标记元素的 id

下面的修改示例演示了如何在加载地图后打开信息 window：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngMap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $timeout, NgMap) {
        this.address = "Toronto Canada";
        $scope.maps = {};

        NgMap.getMap({ id: 'map1' }).then(function (map) {
                map.showInfoWindow('bar1', 'marker1'); //show marker on map load
                $scope.maps['map1'] = map;
        });

        NgMap.getMap({ id: 'map2' }).then(function (map) {
                map.showInfoWindow('bar2', 'marker2'); //show marker on map load
                $scope.maps['map2'] = map;
        });

        $scope.resizeMap = function () {
                $timeout(function () {
                        angular.forEach($scope.maps, function (map) {
                                google.maps.event.trigger(map, 'resize');
                        });
                });

        };

});

 form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>    
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo" ng-controller="TabsDemoCtrl">

  <uib-tabset active="active">
    <uib-tab index="0" heading="tab 1" select="resizeMap()">
        <ng-map id="map1" center="13.0222427,80.1745555" zoom="12" style="width:600px; height:400px">
                <marker id="marker1" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar1')">
                </marker>
                 <info-window id="bar1">
                    <div ng-non-bindable>
                        <div>channi Tamil nadu</div>
                    </div>
                </info-window>
            </ng-map>

    </uib-tab>
   <uib-tab index="1" heading="tab 2" select="resizeMap()">
        <ng-map id="map2" center="13.0222427,80.1745555" zoom="12" style="width:600px; height:400px">
                <marker id="marker2" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar2')">
                </marker>
                 <info-window id="bar2">
                    <div ng-non-bindable>
                        <div>channi CMBT</div>
                    </div>
                </info-window>
            </ng-map>

   </uib-tab>

  </uib-tabset>


</div>

Google 地图 - 标签信息 window 问题

Google map - tabs info window issue

google-maps

angularjs

ng-map