angular google 地图中标记信息的显示错误
Bug in display of marker info in angular google map
我真的很困惑如何让信息在点击标记时正确显示。我试图将 $scope.info 放在 onClick 函数中,但它仍然没有显示。
任何人都可以帮我修复这个错误。我对前端经验不多
相关 html 文件的一部分:
<div ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{mapCtrl.info}}</div>
</ui-gmap-window>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
地图-controller.js
projectControllers.controller('mapCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady){
uiGmapGoogleMapApi.then(function (maps) {
//$scope.googlemap = {};
$scope.map = {
center: {
latitude: 40.1451,
longitude: -99.6680
},
zoom: 4,
pan: 1,
options: $scope.mapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {},
dragend: function (maps, eventName, args) {},
zoom_changed: function (maps, eventName, args) {}
}
};
});
$scope.options = {scrollwheel: false};
$scope.marker = {
title: 'Address',
address: "",
coords: {
latitude: 40.1451,
longitude: -99.6680
},
visible: false,
id: 0
};
$scope.windowOptions = {
show:false
};
$scope.onClick = function (data) {
console.log(data);
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('Office Name ' + data);
//alert('This is a ' + data);
};
$scope.info = "Bug! Info issue"; // Trying to set in onclick, but it doesn't reflect
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
.then(function (instances) {
console.log(instances[0].map); // get the current map
})
.then(function () {
$scope.markers = [];
for (var i = 0; i < $scope.addresses.length; i++) {
$scope.markers.push({
id: $scope.markers.length,
coords: {
latitude: $scope.addresses[i].lat,
longitude: $scope.addresses[i].lng
},
data: $scope.addresses[i].name
});
}
$scope.addMarkerClickFunction($scope.markers);
});
$scope.addMarkerClickFunction = function (markersArray) {
angular.forEach(markersArray, function (value, key) {
console.log(value);
value.onClick = function () {
$scope.info = value.data; //Doesn't seem to take the value here
$scope.onClick(value.data);
$scope.MapOptions.markers.selected = value;
};
});
};
$scope.MapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
},
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
elementType: "all",
stylers: [{
visibility: "off"
}]
}],
};
});
提供的示例中存在一些问题:
1) $scope.markers
需要在uiGmapIsReady
服务之前声明
promise 正在解决,否则 MarkersParentModel: no valid models attribute found
或 Cannot read property 'gManager' of undefined
通常会发生错误
2) 显然表达式 {{mapCtrl.info}}
无效,因为存在范围 属性 初始化为 $scope.mapCtrl.info
3) ui-gmap-markers
指令的 click
属性 的正确表达式语法是 click="onClick"
但不是 click="'onClick'"
(至少在 angular-google-maps
图书馆)
4) 在大多数情况下,不需要为每个标记创建信息 window 实例,因此您可以替换
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
</ui-gmap-markers>
和
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
</ui-gmap-markers>
例子
以下最小示例演示了如何在标记点击时显示信息 window
var app = angular.module('app', ['uiGmapgoogle-maps']);
app.controller('mapCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.markers = [];
$scope.addresses = [
{name: 'London',lat: 51.518305,lng: -0.130444},
{name: 'Paris',lat: 48.856127,lng: 2.352362},
{name: 'Madrid',lat: 40.431598,lng: -3.704263}
];
$scope.map = {
center: {
latitude: 40.1451,
longitude: -99.6680
},
zoom: 10
};
$scope.windowOptions = {
show: false
};
$scope.onClick = function (marker, eventName, model) {
$scope.windowOptions.show = !$scope.windowOptions.show;
$scope.selectedCoords = model.coords;
$scope.info = model.data;
};
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
uiGmapIsReady.promise()
.then(function () {
for (var i = 0; i < $scope.addresses.length; i++) {
$scope.markers.push({
id: $scope.markers.length,
coords: {
latitude: $scope.addresses[i].lat,
longitude: $scope.addresses[i].lng
},
data: $scope.addresses[i].name
});
}
});
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="app" ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-window coords="selectedCoords" show="windowOptions.show" closeclick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="onClick" events="markersEvents" fit="true" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
对我来说非常简单,添加 $timeout 解决了我的问题
这就是问题所在
$timeout(function () {
$scope.map = {
/* here all the map object */
}
}, 200);
然后修复。
我真的很困惑如何让信息在点击标记时正确显示。我试图将 $scope.info 放在 onClick 函数中,但它仍然没有显示。
任何人都可以帮我修复这个错误。我对前端经验不多
相关 html 文件的一部分:
<div ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{mapCtrl.info}}</div>
</ui-gmap-window>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
地图-controller.js
projectControllers.controller('mapCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady){
uiGmapGoogleMapApi.then(function (maps) {
//$scope.googlemap = {};
$scope.map = {
center: {
latitude: 40.1451,
longitude: -99.6680
},
zoom: 4,
pan: 1,
options: $scope.mapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {},
dragend: function (maps, eventName, args) {},
zoom_changed: function (maps, eventName, args) {}
}
};
});
$scope.options = {scrollwheel: false};
$scope.marker = {
title: 'Address',
address: "",
coords: {
latitude: 40.1451,
longitude: -99.6680
},
visible: false,
id: 0
};
$scope.windowOptions = {
show:false
};
$scope.onClick = function (data) {
console.log(data);
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('Office Name ' + data);
//alert('This is a ' + data);
};
$scope.info = "Bug! Info issue"; // Trying to set in onclick, but it doesn't reflect
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
.then(function (instances) {
console.log(instances[0].map); // get the current map
})
.then(function () {
$scope.markers = [];
for (var i = 0; i < $scope.addresses.length; i++) {
$scope.markers.push({
id: $scope.markers.length,
coords: {
latitude: $scope.addresses[i].lat,
longitude: $scope.addresses[i].lng
},
data: $scope.addresses[i].name
});
}
$scope.addMarkerClickFunction($scope.markers);
});
$scope.addMarkerClickFunction = function (markersArray) {
angular.forEach(markersArray, function (value, key) {
console.log(value);
value.onClick = function () {
$scope.info = value.data; //Doesn't seem to take the value here
$scope.onClick(value.data);
$scope.MapOptions.markers.selected = value;
};
});
};
$scope.MapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
},
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
elementType: "all",
stylers: [{
visibility: "off"
}]
}],
};
});
提供的示例中存在一些问题:
1) $scope.markers
需要在uiGmapIsReady
服务之前声明
promise 正在解决,否则 MarkersParentModel: no valid models attribute found
或 Cannot read property 'gManager' of undefined
通常会发生错误
2) 显然表达式 {{mapCtrl.info}}
无效,因为存在范围 属性 初始化为 $scope.mapCtrl.info
3) ui-gmap-markers
指令的 click
属性 的正确表达式语法是 click="onClick"
但不是 click="'onClick'"
(至少在 angular-google-maps
图书馆)
4) 在大多数情况下,不需要为每个标记创建信息 window 实例,因此您可以替换
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
</ui-gmap-markers>
和
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
</ui-gmap-markers>
例子
以下最小示例演示了如何在标记点击时显示信息 window
var app = angular.module('app', ['uiGmapgoogle-maps']);
app.controller('mapCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.markers = [];
$scope.addresses = [
{name: 'London',lat: 51.518305,lng: -0.130444},
{name: 'Paris',lat: 48.856127,lng: 2.352362},
{name: 'Madrid',lat: 40.431598,lng: -3.704263}
];
$scope.map = {
center: {
latitude: 40.1451,
longitude: -99.6680
},
zoom: 10
};
$scope.windowOptions = {
show: false
};
$scope.onClick = function (marker, eventName, model) {
$scope.windowOptions.show = !$scope.windowOptions.show;
$scope.selectedCoords = model.coords;
$scope.info = model.data;
};
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
uiGmapIsReady.promise()
.then(function () {
for (var i = 0; i < $scope.addresses.length; i++) {
$scope.markers.push({
id: $scope.markers.length,
coords: {
latitude: $scope.addresses[i].lat,
longitude: $scope.addresses[i].lng
},
data: $scope.addresses[i].name
});
}
});
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="app" ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-window coords="selectedCoords" show="windowOptions.show" closeclick="closeClick()">
<div>{{info}}</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="onClick" events="markersEvents" fit="true" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
对我来说非常简单,添加 $timeout 解决了我的问题
这就是问题所在
$timeout(function () {
$scope.map = {
/* here all the map object */
}
}, 200);
然后修复。