除了轮询之外,当我手动向地图添加点时,我无法显示窗口。只有预先填充了标记数组,它才会起作用。如果数组预先填充了 1 个标记,然后我在地图加载后手动添加第二个标记,则第一个标记将显示窗口,但第二个不会。这是具有不同纬度/经度的相同标记。据我所知,我的代码几乎与这个 plunker 相同,只是我没有轮询数据。
http://plnkr.co/edit/nbX0BIxNhxFrpzpruRWb?p=preview
http://54.210.49.244:4000/gMaps
我用于 luls 的个人网站。是的,我懒得得到一个真正的域名。它是免费的,好的 XD 证明了这个问题。不支持 IE 9 或更低版本。
这是控制器逻辑。
.controller("gMapsController", ["$scope", '$location', function($scope, $location){
$scope.welcomeMessage = "Welcome to Google Maps Playground"
$scope.map = {
center: {
latitude: 44.41748017333282,
longitude: 26.106005249023376
},
zoom: 12
}
$scope.id = 0;
$scope.map.bounds = {};
$scope.map.randomMarkers = [{
id: 0,
latitude: 44.42138408826953,
longitude: 26.25385948707207,
showWindow: false,
title: "m9"
},
{
id: 1,
latitude: 44.39138408826953,
longitude: 26.21385948707207,
showWindow: false,
title: "m9"
}];
$scope.id++;
$scope.id++;
$scope.id++;
angular.forEach($scope.map.randomMarkers, function(marker) {
marker.showWindow = false;
marker.onClick = function() {
console.log('on click - opening window');
marker.showWindow = true;
$scope.$apply();
}
marker.closeClick = function() {
console.log('close click - hiding window');
marker.showWindow = false;
$scope.$apply();
}
console.log(marker);
});
var generateMarkers = function(markers) {
markers.showWindow = false;
markers.onClick = function() {
console.log('on click - opening window');
markers.showWindow = true;
$scope.$apply();
};
markers.closeClick = function() {
console.log('close click - hiding window');
marker.showWindow = false;
$scope.$apply();
};
console.log(markers);
$scope.map.randomMarkers.push(markers);
};
$scope.generateMarker = function(){
var marker = {
id: $scope.id,
latitude: 44.41138408826953,
longitude: 26.23385948707207,
showWindow: false,
title: "m9",
draggable: true
};
console.log("marker added");
generateMarkers(marker);
$scope.id++;
};
风景
div.container
button(type = "button", ng-click="generateMarker()") Add a Marker
div.row()
div(class = "col-md-6")
google-map(center="map.center", zoom="map.zoom", draggable="true", bounds="map.bounds", control="map.control")
markers(models="map.randomMarkers", coords="'self'", icon="'icon'", click="'onClick'")
windows(show="'showWindow'", closeClick="'closeClick'", ng-cloak)
div
| Window with additional information