MarkerClusterer не видит функцию getPosition()

204

21 июля 2018, 12:00

Вывожу на карту фотографии в виде маркеров, которые необходимо кластеризировать. Выводит ошибку: Uncaught TypeError: marker.getPosition is not a function в файле markerclusterer.js

Выполняю кластеризацию маркеров по инструкции с оффицеального сайта GoogleMaps. Как исправить ошибку?

Подключаю следующие скрипты:

<script src="https://maps.googleapis.com/maps/api/js?key=****"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Скрипт выгрузки маркеров и кластеризация:

var map;
   function initialize() {
    // Prepare markers array
    var markers = [];
    <% photoList.forEach(function(photo) { %>
    markers.push({
        latLan: new google.maps.LatLng("<%= photo.latit %>", "<%= photo.longit %>"),
        img: "<%= photo.preview %>"
    });
    <% }) %>
    //определение карты
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: new google.maps.LatLng(48.42216, 44.31308),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    markers.forEach(function (item) {
        new RichMarker({
            position: item.latLan,
            map: map,
            content: '<div class="google-marker"><img src="'+item.img+'"/></div>',
            shadow: 0
        });
    });
    //Кластеризация
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}

Answer 1

Проверьте тип вашего JS-элемента. Я подозреваю, что это не объект Marker. Дело в том, что в начале массив markers заполняется объектами (markers.push({...})), а затем вы пытаетесь через foreach поменять исходный массив (markers.forEach(function (item) {...})), но не делаете этого по понятным причинам - там идет просто перебор всех элементов и создание RichMarker который никуда не попадает, и в результате вы передаете в MarkerClusterer массив объектов, созданный еще при наполнении этого массива в markers.push({...}).

Уберите ваш блок кода из функции initialize (хоть RichMarker и соджержит метод getPosition, но для начала нужно это убрать) который кажется немного неправильным:

markers.forEach(function (item) {
    new RichMarker({
        position: item.latLan,
        map: map,
        content: '<div class="google-marker"><img src="'+item.img+'"/></div>',
        shadow: 0
    });
});

Замените убранный код на следующий (я настоятельно не рекомендую менять элементы коллекции через forEach, с этим отлично справляется метод map):

markers = markers.map(function (item) {
    return new RichMarker({
        position: item.latLan,
        map: map,
        content: '<div class="google-marker"><img src="'+item.img+'"/></div>',
        shadow: 0
    });
});

Чтобы удостовериться в том, что вы передаете нормальный массив при создании MarkerClusterer - поставьте точку останова перед его созданием и посмотрите на переменную markers.