Только последний маркер кликабелен в Javascript Map - PullRequest
Новая
       7

Только последний маркер кликабелен в Javascript Map

0 голосов
/ 08 декабря 2018

Я работаю с Google Javascript Map API для построения графиков для всех ресторанов, сохраненных в моей базе данных. Я закодировал объект JSON и создал массив маркеров, нанесенных на карту. 

var locations = [['You Are Here', position.coords.latitude, position.coords.longitude, 'user.png', 0]];
jsonresturant.forEach(element => {
    locations.push([element.site_title, element.site_lat, element.site_long, element.site_logo, element.site_id]);
});
var marker, i;

for (i = 0; i < locations.length; i++) {
    var icon = {
        url: `<?php echo base_url()?>uploads/logos/${locations[i][3]}`,
        scaledSize: new google.maps.Size(50, 50), // scaled size
        origin: new google.maps.Point(0, 0) // origin
    };
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        url: `<?php echo base_url()?>shop/?id=${locations[i][4]}`,
        title: locations[i][0],
        icon: icon
    });
}

Теперь я хочу сделать каждый маркер.на кликабельный 

google.maps.event.addListener( marker, 'click',
    (function(marker, i) {
        return function() {
            window.location.href = this.url;
        };
    })(marker, i)
);

1 Ответ

0 голосов
/ 08 декабря 2018

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

for (i = 0; i < locations.length; i++) {
    var icon = {
        url: `<?php echo base_url()?>uploads/logos/${locations[i][3]}`,
        scaledSize: new google.maps.Size(50, 50), // scaled size
        origin: new google.maps.Point(0, 0) // origin
    };
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        url: `<?php echo base_url()?>shop/?id=${locations[i][4]}`,
        title: locations[i][0],
        icon: icon
    });


    // bind to the event for marker
    google.maps.event.addListener( marker, 'click',
        (function(marker, i) {
            return function() {
                window.location.href = this.url;
            };
        })(marker, i)
    );
}
...