そのため、 http://angular-ui.github.io/angular-google-maps/# ! /api の angular-google-maps ディレクティブを 使用していますが、マップ インスタンスにマーカーが表示されません。私はほぼすべてを試しましたが、アドバイスを切望しています。$scope.markers を $scope.map オブジェクトに移動し、$watch 関数内に移動して、値を html に直接追加しようとしましたが、うまくいきませんでした。これは、タブ内にマップを完全にロードするために追加しなければならなかった $scope.control.refresh() 関数と関係があると考えています(角度ブートストラップタブを使用しています)。
助けてくれてありがとう!
HTML
<div ng-controller="LocationCtrl" ng-cloak>
<div class="map-canvas" ng-if="locationActive">
<ui-gmap-google-map draggable="true" center='map.center' zoom='map.zoom' control="control">
<ui-gmap-marker coords="markers.coords" idKey="markers.idKey">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
ジャバスクリプト
(function() {
'use strict';
var locationCtrl = function($scope, uiGmapIsReady, $timeout) {
$scope.map = {
center: { latitude: 36.132411, longitude: -80.290481 },
zoom: 15
};
$scope.control = {};
$scope.active = $scope.$parent.active;
$scope.locationActive = $scope.active().active;
$scope.$watch($scope.active, function() {
$timeout(function() {
uiGmapIsReady.promise().then(function () {
$scope.control.refresh();
var map = $scope.control.getGMap();
$scope.markers= {
idKey: 1,
coords: {
latitude: 36.132411,
longitude: -80.290481
}
};
});
}, 0);
});
};
angular.module('boltlandApp').controller('LocationCtrl', locationCtrl);
})();