angular-google-maps标记不显示
因此，我正在使用http://angular-ui.github.io/angular-google-maps/#!/api中的angular-google-maps指令，并且我无法在地图实例上看到我的标记。我几乎什么都试过了，迫切需要建议。我尝试将$scope.markers移动到我的$scope.map对象，尝试在我的$watch函数中移动它，并将值直接添加到html中，但没有成功。我认为这与我必须添加的$scope.control.refresh()函数有关，以便在选项卡中完全加载地图(我使用的是angular-bootstrap选项卡)。
谢谢你的帮助！
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>JAVASCRIPT
(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);
})();回答 5
Stack Overflow用户
发布于 2015-01-24 07:06:21
在您的HTML中添加：
<ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'">
</ui-gmap-markers>Javascript：
将此代码添加到$scope.$watch($scope.active, function() {中
uiGmapIsReady.promise().then(function () {
$scope.markers.push({
idKey: 1,
coords: {
latitude: 36.132411,
longitude: -80.290481
},
});Stack Overflow用户
发布于 2015-01-24 04:51:32
我受够了angular-google-map，所以我转而使用ngMaps ( github https://ngmap.github.io/maptypes.html#/maptype-image#maptype-image中的angularjs-google-map)
HTML
<div ng-controller="LocationCtrl" ng-cloak>
<map class="map_canvas" ng-if="locationActive" ng-cloak center="32, -80" zoom="15">
<marker position="32, -80" title="angularTestTitle"></marker>
</map>
</div>JAVASCRIPT
(function() {
'use strict';
var locationCtrl = function($scope, $timeout) {
$scope.active = $scope.$parent.active;
$scope.$watch($scope.active, function() {
if($scope.active().title === "Location") {
$scope.locationActive = true;
} else {
$scope.locationActive = false;
}
$timeout(function() {
}, 0);
});
};
angular.module('boltlandApp').controller('LocationCtrl', locationCtrl);
})();Stack Overflow用户
发布于 2015-01-24 04:12:23
它不能与ui-gmap- work一起工作，但是可以与ui-gmap-markers一起工作。我认为这是因为$scope.markers一开始没有定义。
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<style>
.angular-google-map-container {
width: 500px;
height: 500px;
}
</style>
</head>
<body ng-app="boltlandApp">
<div ng-controller="LocationCtrl">
<div class="map-canvas">
<ui-gmap-google-map draggable="true" center='map.center' zoom='map.zoom' control="control">
<ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</div>
</body>
<script>
(function() {
'use strict';
var locationCtrl = function($scope, uiGmapIsReady, $timeout) {
$scope.markers = [];
$scope.map = {
center: { latitude: 36.132411, longitude: -80.290481 },
zoom: 15
};
$scope.control = {};
$scope.$watch($scope.active, function() {
$timeout(function() {
uiGmapIsReady.promise().then(function () {
$scope.markers.push({
idKey: 1,
coords: {
latitude: 36.132411,
longitude: -80.290481
},
});
});
}, 0);
});
};
angular.module('boltlandApp', ['uiGmapgoogle-maps'])
angular.module('boltlandApp').controller('LocationCtrl', locationCtrl);
})();
</script>
</html>
https://stackoverflow.com/questions/28113659
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号