2016-03-22 8 views
0

Ich verwende ng Karte in zwei Tabs. Beim Laden, um die Markierung mit Adresse beide Registerkarten anzuzeigen. Wenn einmal der Marker den Fehler in der Konsole anzeigt. Ich versuche es, aber ich kann das nicht beheben. Onload Ich möchte den Marker mit (Infofenster) Adresse beide Tabs anzeigen.Google Karte - Tabs Infofenster Ausgabe

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

Antwort

2

die folgende Syntax verwenden:

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

Info-Fenster zu öffnen, in dem

  • bar1 - id von Infofenster Element
  • marker1 - id von Markierungselement

Das unten modifiziertes Beispiel zeigt, wie Info-Fenster zu öffnen, sobald die Karte geladen wird:

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>

Verwandte Themen