Javascript для цикла не работает

У меня есть некоторый опыт программирования, но я новичок в Javascript.

Я пытаюсь создать html-файл, который показывает карту Google и поставить на него несколько маркеров.

Он отлично работает, когда я делаю это по одному маркеру за раз, например:

function initMap() {
    var map = ...;
    var icon = ...;

    var pt1 = {lat: ..., lng: ...};
    var marker1 = new google.maps.Marker({
        position: pt1,
        map: map,
        icon: icon,
        label: {..., text: '1'},
        title: 'Marker 1'
    });

    var pt2 = {lat: ..., lng: ...};
    var marker2 = new google.maps.Marker({
        position: pt2,
        map: map,
        icon: icon,
        label: {..., text: '2'},
        title: 'Marker 2'
    });

    var pt3 = {lat: ..., lng: ...};
    var marker3 = new google.maps.Marker({
        position: pt3,
        map: map,
        icon: icon,
        label: {..., text: '3'},
        title: 'Marker 3'
    });
}

Теперь я попытался поместить определение маркеров в массив и создание маркеров в цикле, но не могу заставить его работать.

Я пробовал вот так:

var places = [
    {id: 1, lat: ..., lng: ..., title: 'Marker 1'},
    {id: 2, lat: ..., lng: ..., title: 'Marker 2'},
    {id: 3, lat: ..., lng: ..., title: 'Marker 3'}
]

function initMap() {
    var map = ...;
    var icon = ...;

    for(var i=0; i<places.length; i++) {
        var marker = new google.maps.Marker({
            position: {lat: places[i].lat, lng: places[i].lng},
            map: map,
            icon: icon,
            label: {..., text: ''+places[i].id},
            title: places[i].title
        });
    }
}

Помещение window.alert(places[i].title) внутрь цикла показывает мне все заголовки, поэтому определение массива и заголовок цикла кажутся нормальными. Но как только я пытаюсь создать маркеры внутри цикла, карта и маркеры не отображаются, поэтому я предполагаю, что это какая-то ошибка, но я не могу ее понять.

Видите ли вы какие-нибудь синтаксические ошибки, которые я сделал?

какая-либо ошибка в консоли, уверены ли вы, что ваши place [i] .lat возвращают вместо этого число, а не строку?

Margon 18.06.2018 08:21

Спасибо, упоминание консоли было правильным советом. Так много нужно узнать об отладке javascript. У меня было несколько ошибок, все они произошли из-за того, что я использовал Notepad ++ только в качестве среды разработки (без проверки кода). Есть ли бесплатная среда разработки для javascript с intellisense и проверкой кода, например Visual Studio для .NET?

Nostromo 18.06.2018 08:33

VS Code (бесплатно) или Web Storm (платно).

Faheem 18.06.2018 08:35

Если вы студент, у вас может быть бесплатная лицензия с идеей intelliJ, действительно хороший ide для Интернета, иначе есть атом, затмение ... P.s. привыкайте проверять / всегда открывать ошибку консоли браузера, это вам очень помогает! : D

Margon 18.06.2018 08:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
4
452
1

Ответы 1

Вы каждый раз перезаписываете "маркерную" переменную.

var marker = new google.maps.Marker ({

Вам нужно будет создать массив для маркеров, как вы делали для точек (широта, долгота, плитка).

Так должно быть:

var places = [
    {id: 1, lat: ..., lng: ..., title: 'Marker 1'},
    {id: 2, lat: ..., lng: ..., title: 'Marker 2'},
    {id: 3, lat: ..., lng: ..., title: 'Marker 3'}
]

function initMap() {
    var map = ...;
    var icon = ...;
    var markers = [];

    for(var i=0; i<places.length; i++) {
        markers.push(new google.maps.Marker({
            position: {lat: places[i].lat, lng: places[i].lng},
            map: map,
            icon: icon,
            label: {..., text: ''+places[i].id},
            title: places[i].title
        }));
    }
}

И вы должны использовать const для массивов (маркеров и мест) и впустить цикл for.

Я знал, что переопределяю переменную-маркер в своем цикле, но поскольку я ничего не делаю с этой переменной, кроме ее создания, я не стал пока помещать их в массив. Но теперь я знаю, как это сделать, спасибо.

Nostromo 18.06.2018 08:37

Другие вопросы по теме