ng-map vm.positions 不更新
ng-map vm.positions don't update
我在 AngularJS 中使用 ng-map 指令。
我有以下代码来生成标记。
我将每个标记保存在数组经纬度中,如示例中所示 (https://ngmap.github.io/#/!marker_with_ng_repeat_dynamic.html)
我可以在日志中看到信息是正确的。但是没有添加到我的地图中。
这是我的 AngularJS 代码:
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($interval, $http) {
var generateMarkers = function() {
var vm = this;
vm.positions = [];
$http.get("data").
success(function(data) {
console.log(data);
console.log("length array" + data.length);
for (i = 0; i < data.length; i++) {
var lat = parseFloat(data[i].latitud);
var lng = parseFloat(data[i].longitud);
console.log("pos: " +lat + lng);
vm.positions.push([lat, lng]);
console.log("vm.positions", vm.positions);
}
}).
error(function (data) {
console.log("fallo");
});
};
$interval(generateMarkers, 20000);
});
还有我的 HTML 代码:
<ng-map zoom="14" center="[42.8169, -1.6432]" default-style="false">
<marker ng-repeat="p in vm.positions" position="{{p}}"></marker>
</ng-map>
这是我的日志:
vm.positions [Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]0: Array[2]0: 42.8133161: -1.647981length: 2__proto__: Array[0]1: Array[2]0: 42.811868050589231: -1.635117530822754length: 2__proto__: Array[0]2: Array[2]0: 42.811868050589231: -1.639484167098999length: 2__proto__: Array[0]3: Array[2]0: 42.8139773239805951: -1.6452884674072266length: 2__proto__: Array[0]4: Array[2]0: 42.815834684266571: -1.6393446922302246length: 2__proto__: Array[0]5: Array[2]0: 42.8169010671877861: -1.6428154706954956length: 2__proto__: Array[0]6: Array[2]0: 42.8160038901641541: -1.6477882862091064length: 2__proto__: Array[0]7: Array[2]0: 42.811805086098651: -1.6448163986206055length: 2__proto__: Array[0]8: Array[2]0: 42.8174086747381: -1.6568756103515625length: 2__proto__: Array[0]9: Array[2]0: 42.805945172637361: -1.6659602522850037length: 2__proto__: Array[0]length: 10__proto__: Array[0]concat: concat()constructor: Array()copyWithin: copyWithin()entries: entries()every: every()fill: fill()filter: filter()find: find()findIndex: findIndex()forEach: forEach()includes: includes()indexOf: indexOf()join: join()keys: keys()lastIndexOf: lastIndexOf()length: 0map: map()pop: pop()push: push()reduce: reduce()reduceRight: reduceRight()reverse: reverse()shift: shift()slice: slice()some: some()sort: sort()splice: splice()toLocaleString: toLocaleString()toString: toString()unshift: unshift()Symbol(Symbol.iterator): values()Symbol(Symbol.unscopables): Object__proto__: Object
这里是plnkr:http://plnkr.co/edit/5uGUeyeuAie0TAFzIHMo?p=preview
与示例类似,但添加了一个 GET 请求以获取包含 lat 和 lng 值的数组。
我更新了 plnk,删除了 GET 请求并更新了数据值。
请检查工作插件
http://plnkr.co/edit/4EHaJXNWfVFCIHvCOu5p?p=preview
你在函数中使用了以下代码,请从函数中取出。
var vm = this;
vm.positions = [];
我在 AngularJS 中使用 ng-map 指令。 我有以下代码来生成标记。 我将每个标记保存在数组经纬度中,如示例中所示 (https://ngmap.github.io/#/!marker_with_ng_repeat_dynamic.html) 我可以在日志中看到信息是正确的。但是没有添加到我的地图中。
这是我的 AngularJS 代码:
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($interval, $http) {
var generateMarkers = function() {
var vm = this;
vm.positions = [];
$http.get("data").
success(function(data) {
console.log(data);
console.log("length array" + data.length);
for (i = 0; i < data.length; i++) {
var lat = parseFloat(data[i].latitud);
var lng = parseFloat(data[i].longitud);
console.log("pos: " +lat + lng);
vm.positions.push([lat, lng]);
console.log("vm.positions", vm.positions);
}
}).
error(function (data) {
console.log("fallo");
});
};
$interval(generateMarkers, 20000);
});
还有我的 HTML 代码:
<ng-map zoom="14" center="[42.8169, -1.6432]" default-style="false">
<marker ng-repeat="p in vm.positions" position="{{p}}"></marker>
</ng-map>
这是我的日志:
vm.positions [Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]0: Array[2]0: 42.8133161: -1.647981length: 2__proto__: Array[0]1: Array[2]0: 42.811868050589231: -1.635117530822754length: 2__proto__: Array[0]2: Array[2]0: 42.811868050589231: -1.639484167098999length: 2__proto__: Array[0]3: Array[2]0: 42.8139773239805951: -1.6452884674072266length: 2__proto__: Array[0]4: Array[2]0: 42.815834684266571: -1.6393446922302246length: 2__proto__: Array[0]5: Array[2]0: 42.8169010671877861: -1.6428154706954956length: 2__proto__: Array[0]6: Array[2]0: 42.8160038901641541: -1.6477882862091064length: 2__proto__: Array[0]7: Array[2]0: 42.811805086098651: -1.6448163986206055length: 2__proto__: Array[0]8: Array[2]0: 42.8174086747381: -1.6568756103515625length: 2__proto__: Array[0]9: Array[2]0: 42.805945172637361: -1.6659602522850037length: 2__proto__: Array[0]length: 10__proto__: Array[0]concat: concat()constructor: Array()copyWithin: copyWithin()entries: entries()every: every()fill: fill()filter: filter()find: find()findIndex: findIndex()forEach: forEach()includes: includes()indexOf: indexOf()join: join()keys: keys()lastIndexOf: lastIndexOf()length: 0map: map()pop: pop()push: push()reduce: reduce()reduceRight: reduceRight()reverse: reverse()shift: shift()slice: slice()some: some()sort: sort()splice: splice()toLocaleString: toLocaleString()toString: toString()unshift: unshift()Symbol(Symbol.iterator): values()Symbol(Symbol.unscopables): Object__proto__: Object
这里是plnkr:http://plnkr.co/edit/5uGUeyeuAie0TAFzIHMo?p=preview 与示例类似,但添加了一个 GET 请求以获取包含 lat 和 lng 值的数组。 我更新了 plnk,删除了 GET 请求并更新了数据值。
请检查工作插件
http://plnkr.co/edit/4EHaJXNWfVFCIHvCOu5p?p=preview
你在函数中使用了以下代码,请从函数中取出。
var vm = this;
vm.positions = [];