循环函数
Function in a loop
我有一个(谷歌)地图,上面有几个标记。这些标记的坐标和描述存储在对象中,标记在循环中创建。现在,我想以"key"值作为链接目标向每个标记添加一个单击事件。这是我的代码片段:
对象:
$localstorage.setObject('lsStations', {
"STA": {lat: '50.93358', lng: '6.57', name: 'Station A'},
"STB": {lat: '50.9332', lng: '6.56690', name: 'Station B'},
"STC": {lat: '50.934', lng: '6.566', name: 'Station C'}
});
创建地图和标记:
.controller('GMapsCtrl', function ($scope, $localstorage) {
'use strict';
// initialize variables
var map,
myLatLng = new google.maps.LatLng(50.93358, 6.56692),
stationCoords = $localstorage.getObject('lsStations');
$scope.init = function () {
var mapOptions = {
zoom: 16,
// default center
center: myLatLng,
// disable google maps ui
disableDefaultUI: 1
},
map = new google.maps.Map(document.getElementById('map'), mapOptions),
marker = [],
index,
key;
for (key in stationCoords) {
if (stationCoords.hasOwnProperty(key)) {
// add marker for station
marker[key] = new google.maps.Marker({
position: new google.maps.LatLng(stationCoords[key].lat, stationCoords[key].lng),
map: map,
title: stationCoords[key].name
});
// add click event for each marker
google.maps.event.addListener(marker[key], 'click', function () {
$scope.startStation = key;
alert(key);
}
)}
}
};
$scope.init();
});
当我单击任何标记时,警报文本是"STC"而不是第一个标记的"STA",第二个标记的"STB"和第三个标记的"STC"。因此,我试图将函数代码放在循环之外:
.controller('GMapsCtrl', function ($scope, $localstorage) {
'use strict';
// initialize variables
var map,
myLatLng = new google.maps.LatLng(50.93358, 6.56692),
stationCoords = $localstorage.getObject('lsStations');
$scope.init = function () {
var mapOptions = {
zoom: 16,
// default center
center: myLatLng,
// disable google maps ui
disableDefaultUI: 1
},
map = new google.maps.Map(document.getElementById('map'), mapOptions),
marker = [],
index,
key;
function createMarker() {
$scope.startStation = key;
alert(key);
//window.location.href = '#/station/' + key;
}
for (key in stationCoords) {
if (stationCoords.hasOwnProperty(key)) {
// add marker for station
marker[key] = new google.maps.Marker({
position: new google.maps.LatLng(stationCoords[key].lat, stationCoords[key].lng),
map: map,
title: stationCoords[key].name
});
// add click event for each marker
google.maps.event.addListener(marker[key], 'click', createMarker(key));
}
}
};
$scope.init();
});
使用此代码,警报对话框获得正确的文本("STA"、"STB"和"STC")。但是它们在加载页面时都会被触发,如果我单击标记,则没有任何反应。
如何为每个标记分配一个点击事件,为每个标记分配不同的键值?
谢谢!
你可以
使用闭包(这是基于发布建议然后删除它的人的想法)
createMarkersForRecommendations = function() {
return stationCoords.forEach(function(rec, idx) {
var thisPoint;
thisPoint = new google.maps.LatLng(rec.lat, rec.lng);
map.markers[idx] = new google.maps.Marker({
title: rec.rname,
position: thisPoint,
icon: rec.icon,
});
map.markers[idx].setMap(map);
google.maps.event.addListener(map.markers[idx], "click", (function(ix) {
if (Restos.debug) {
console.log(ix + 1, map.markers[ix].getTitle());
}
return $scope.$apply(); // as a google maps click event does not trigger an angluar digest
}).bind(null, idx));
});
};
我稍微更改了 Aqib Mapari 的代码片段,现在它正在工作:
google.maps.event.addListener(marker[key], 'click', function () {
var thisMarker;
for (thisMarker in marker) {
if (marker[thisMarker] === this) {
// link to detail page for selected marker
window.location.href = '#/station/' + thisMarker;
}
}
});
实际上我认为
可能有一种更简单的方法 - 我认为您已经有了闭包,但只是没有正确使用它
function createMarker(key) {
// ^^^
$scope.startStation = key;
alert(key);
//window.location.href = '#/station/' + key;
}
尝试在单击功能中进行此更改。它对我有用。
google.maps.event.addListener(marker[key], 'click', function () {
for(var j=0; j<marker.length; j++){
if(marker[j] == this){
$scope.startStation = key;
alert(key);
}
}
});
谢谢。
相关文章:
- Chrome/jQuery未捕获范围错误:超过了最大调用堆栈大小(函数循环)
- 如何在返回值(Js)时不中断函数/循环
- 函数在自己的循环中使用 i,以及一个子函数循环 - var 的行为类似于 let
- 我可以在 jquery 中对函数循环使用相同的返回值吗?
- 如何使用 each() 函数循环访问 JSON 文件
- jQuery函数循环两次
- setInterval 函数循环太快
- 简化我的函数(循环、数组)
- 我的 IF 条件如何影响全局变量使函数循环
- 使用ReactJS和concatJSX语法进行渲染时的map函数循环
- 如何通过OnClick函数循环遍历标记元素并在显示器上获得相应的内容
- 函数循环问题
- 将计数器添加到javascript函数循环中
- 通过future函数循环和设置全局变量
- jQuery创建一个函数循环,每个函数都有一个动画队列
- 从另一个函数终止一个活动的javascript函数/循环
- jQuery函数循环:为什么夏奇拉在陌生人吻她时重复吻
- 在一个简单的函数循环中设置style.display时出现了奇怪的行为
- 通过多个函数循环/setinterval
- 试图防止Jquery函数循环