Навешивать события в цикле
Здравствуйте!
Делаю карту с заказами. В каждом городе может быть несколько заказов. Я рисую в каждом городе, в котором есть заказы точку и по её нажатии во всплывающий див нужно выводить информацию о всех имеющихся заказах в городе. Столкнулся с проблемой: навешиваю обработчики событий в цикле. var infoWindow = new google.maps.InfoWindow({ content: '<div>' + text + '</div>' }); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map, marker); }); Но когда нажимаю на любую точку, мне почему-то высвечивается див с последним в цикле городом и возле этого города. Нажимаю на Париж - карта высвечивает мне Нью-Йоркские заказы и переходит к Нью-Йорку. Нажимаю на Лондон - то же самое. Т.е. как я понял этот обработчик существует только один. И т.к. последний в цикле был город Нью-Йорк - выводятся только Нью-Йоркские заказы даже по нажатию на любой другой город. Как сделать так, чтобы при нажатии на Лондон выводился лондонский заказ?(и т.д.) На всякий случай коды файлов: map.js var map; function initMap() { var myLatlng = new google.maps.LatLng(-34.397, 150.644); map = new google.maps.Map(document.getElementById('map'), { center: myLatlng, zoom: 8 }); var markers = {}; for (var i in orders) { var city = orders[i][orders[i].length - 1]; if(!markers[city]){ markers[city] = []; } markers[city].push(orders[i]); } for (city in markers) { myLatlng = findLatlng(city); var marker = new google.maps.Marker({ position: myLatlng, map: map }); var text = ''; for (var currentOrder in markers[city]) { if(currentOrder > 0){ text += '<hr>'; } /*for (var j in orders) { if(orders[j] !== markers[city][currentOrder]){ continue; } var orderId = j; break; } text += 'Заказ №' +(orderId+1) + '<br>';*/ for (var item in markers[city][currentOrder]) { if(typeof markers[city][currentOrder][item] !== 'object'){ continue; } if(markers[city][currentOrder][item]['id'] !== 1){ text += '<br>'; } text += markers[city][currentOrder][item]['id'] + ". " + markers[city][currentOrder][item]['name'] + ", " + markers[city][currentOrder][item]['count'] + " штук, " + markers[city][currentOrder][item]['price'] + markers[city][currentOrder][item]['moneySign']; } } var infoWindow = new google.maps.InfoWindow({ content: '<div>' + text + '</div>' }); google.maps.event.addListener(marker, 'click', function() { j.open(map, marker); }); } } function showMap() { $('#map').show(); initMap(); } function showOrderOnMap() { var orderId = $('.button.selected').data('id'); city = orders[orderId][1]; var myLatlng = findLatlng(city); console.log(myLatlng); map.center = myLatlng; } function findLatlng(city) { var myLatlng; $.ajax({ url: 'http://maps.googleapis.com/maps/api/geocode/json?address='+ city +'&sensor=false&language=en', async: false, success: function(data) { myLatlng = new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']); } }); return myLatlng; } index.html <!doctype html> <html> <head> <title>Task Order</title> <link rel="stylesheet" type="text/css" href="style/main.css"> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/script.js" charset="utf-8"></script> </head> <body> <nav> <p>Menu</p> <ul> <li><a href="#">Заказы</a></li> <li><a href="#" onclick="showMap()">Карта</a></li> </ul> </nav> <section> <div id="ordertabs"></div> <input type="text" id="search"> <table id="orderstable"> <thead></thead> <tbody></tbody> </table> <a href="#" onclick="showOrderOnMap()">Показать на карте</a> <div id="map"></div> </section> <script src ="js/map.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHCac5x5Eq9LRUFqSYcHBFlygfI9mJxYA" async defer></script> </body> </html> Ну и об организации данных в основном файле script.js var orders = [ [ { id: 1, name: "Book", count: 3, price: "157", moneySign: '$' }, { id: 2, name: "Pen", count: 4, price: "85", moneySign: '$' }, { id: 3, name: "Phone", count: 1, price: "464", moneySign: '$' }, { id: 4, name: "Pencil Red", count: 65, price: "314", moneySign: '$' }, { id: 5, name: "Sharpener", count: 6, price: "96", moneySign: '$' }, "London" ], [ { id: 1, name: "Tape", count: 5, price: "543", moneySign: '$' }, { id: 2, name: "Textbook", count: 65, price: "314", moneySign: '$' }, { id: 3, name: "Pencil case", count: 35, price: "346", moneySign: '$' }, { id: 4, name: "Desk", count: 5, price: "4314", moneySign: '$' }, { id: 5, name: "Marker", count: 5, price: "145", moneySign: '$' }, "Paris" ], [ { id: 1, name: "Paper", count: 5, price: "87", moneySign: '$' }, { id: 2, name: "Chalk", count: 6, price: "435", moneySign: '$' }, { id: 3, name: "Clock", count: 8, price: "563", moneySign: '$' }, { id: 4, name: "Ruler", count: 22, price: "457", moneySign: '$' }, { id: 5, name: "Globe", count: 7, price: "789", moneySign: '$' }, "New-York" ], [ { id: 1, name: "Chair", count: 2, price: "54", moneySign: '$' }, { id: 2, name: "Eraser", count: 56, price: "2445", moneySign: '$' }, { id: 3, name: "Map", count: 11, price: "345", moneySign: '$' }, { id: 4, name: "Scissors", count: 24, price: "451", moneySign: '$' }, { id: 5, name: "Notebook", count: 32, price: "654", moneySign: '$' }, "Paris" ] ]; |
Neo54213,
самое простое заменить for на forEach, сложнее прочитать про замыкания https://javascript.ru/basic/closure#...-ispolzovaniya и сделать как тут |
Спасибо. Сделал по замыканиям, так
google.maps.event.addListener(marker, 'click', function(currentMarker, currentInfoWindow) { return function() { currentInfoWindow.open(map, currentMarker); } }(marker, infoWindow)); |
Neo54213,
:victory: |
Часовой пояс GMT +3, время: 09:39. |