Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2018, 21:26
Интересующийся
Отправить личное сообщение для milov Посмотреть профиль Найти все сообщения от milov
 
Регистрация: 13.05.2012
Сообщений: 16

Как сделать чтоб каждая метка при ховере брала свою картинку?
Добавляю на карту метки и для каждой своё изображение для метки и для ховера тоже. У меня при наведении на любую метку изображение ставиться одно и тоже. Как сделать чтоб у каждой метки своё брала?

var myCollection = new ymaps.GeoObjectCollection({});
for (i in data.item) {
    var layout = ymaps.templateLayoutFactory.createClass('<div><img src="..."/></div>');
    var layout_hover = ymaps.templateLayoutFactory.createClass('<div><img src="..."/></div>');

    var myPlacemark = new ymaps.Placemark([lat, lng], {...}, {
                    iconLayout: layout,
                    iconShape: {
                        type: 'Circle',
                        coordinates: [0, 0],
                        radius: 25
                    }
                });)
    myPlacemark.events
        .add('mouseenter', function (e) {
            e.get('target').options.set("iconLayout", layout_hover);
        })
        .add('mouseleave', function (e) {
            e.get('target').options.set("iconLayout", layout);
        });

    myCollection.add(myPlacemark);
}
myMap.geoObjects.add(myCollection);


Похоже берёт layout последний который в цикле.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2018, 21:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

milov,
замените for на forEach
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2018, 21:48
Интересующийся
Отправить личное сообщение для milov Посмотреть профиль Найти все сообщения от milov
 
Регистрация: 13.05.2012
Сообщений: 16

Сообщение от рони Посмотреть сообщение
milov,
замените for на forEach
Проблема осталась.
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2018, 21:50
Интересующийся
Отправить личное сообщение для milov Посмотреть профиль Найти все сообщения от milov
 
Регистрация: 13.05.2012
Сообщений: 16

на карту выводится правильно, у каждой метки своя картинка. Проблема с событиями mouseenter mouseleave
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2018, 21:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

milov,
где код?
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2018, 21:57
Интересующийся
Отправить личное сообщение для milov Посмотреть профиль Найти все сообщения от milov
 
Регистрация: 13.05.2012
Сообщений: 16

код в первом посте.
сделать в jsfidle ?

Последний раз редактировалось milov, 14.11.2018 в 21:59.
Ответить с цитированием
  #7 (permalink)  
Старый 14.11.2018, 22:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

milov,
forEach сделайте
Ответить с цитированием
  #8 (permalink)  
Старый 14.11.2018, 22:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

milov,
var myCollection = new ymaps.GeoObjectCollection({});
data.item.forEach(function(el, i) {
    var layout = ymaps.templateLayoutFactory.createClass('<div><img src="..."/></div>');
    var layout_hover = ymaps.templateLayoutFactory.createClass('<div><img src="..."/></div>');
    var myPlacemark = new ymaps.Placemark([lat, lng], {...}, {
                    iconLayout: layout,
                    iconShape: {
                        type: 'Circle',
                        coordinates: [0, 0],
                        radius: 25
                    }
                });

    myPlacemark.events
        .add('mouseenter', function (e) {
            e.get('target').options.set("iconLayout", layout_hover);
        })
        .add('mouseleave', function (e) {
            e.get('target').options.set("iconLayout", layout);
        });

    myCollection.add(myPlacemark);
})
myMap.geoObjects.add(myCollection);
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2018, 00:05
Интересующийся
Отправить личное сообщение для milov Посмотреть профиль Найти все сообщения от milov
 
Регистрация: 13.05.2012
Сообщений: 16

рони,
именно так и сделал. проблема осталась как я и писал выше.
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2018, 00:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

milov,
больше идей нет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтоб появлялись рамки меток на фотографии? Alexandro jQuery 10 11.02.2017 17:46
Подскажите как сделать звуковое оповищение при закрытии окна браузера lasgo3 Общие вопросы Javascript 1 16.04.2016 00:19
Как сделать при покупке товара менялось их количество на сайте noXeZ Элементы интерфейса 3 23.12.2014 02:40
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14