我在两个标签中使用ng map。在加载时显示带有地址的标记。如果标记一旦在控制台中显示错误。我正在尝试,但无法解决这个问题。 Onload我想用两个标签显示带有(信息窗口)标记的标记。
<!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>
答案 0 :(得分:2)
使用以下语法:
map.showInfoWindow('bar1', 'marker1');
打开信息窗口,其中
bar1
- 信息窗口元素的ID marker1
- 标记元素的ID 以下修改过的示例演示了如何在加载地图后打开信息窗口:
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>