Показать сообщение отдельно
  #1 (permalink)  
Старый 30.07.2017, 19:04
Интересующийся
Отправить личное сообщение для Neo54213 Посмотреть профиль Найти все сообщения от Neo54213
 
Регистрация: 04.07.2017
Сообщений: 20

Навешивать события в цикле
Здравствуйте!
Делаю карту с заказами. В каждом городе может быть несколько заказов. Я рисую в каждом городе, в котором есть заказы точку и по её нажатии во всплывающий див нужно выводить информацию о всех имеющихся заказах в городе. Столкнулся с проблемой: навешиваю обработчики событий в цикле.
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"
    ]
];
Ответить с цитированием