Нашел такой пример кода из комментариев к вопросу - Плавное перемещение карты яндекс по клику
Подставил свои значения в data-goto = "Киев" и все перестало работать.
Вопрос как можно настроить переключение карты по клику на ссылку (адрес через data-goto) и как разместить кастомный маркер на карте с этим самым адресом?
Подозреваю что вывод маркера можно сделать как-то так
myPlacemark2 = new ymaps.Placemark(destinations['Киев'], {
balloonContent: ...
Но что-то с destinations[data-goto] что-то никак не свяжу.
//Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init() {
var result = document.getElementById('result'), // для отладки
// в этой версии координаты просто элементы массива (и они поменяны местами)
destinations = {
'Москва': [55.753559, 37.609218],
'Санкт-Петербург': [59.938531, 30.313497],
'Екатеринбург': [56.829748, 60.617435],
'Одесса': [46.466444, 30.7058]
},
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: destinations['Москва'], // Москва
zoom: 10
});
// все ок
result.textContent = 'map init';
// куда скакать
function clickGoto() {
// город
var pos = this.getAttribute('data-goto'); // или this.getAttribute('title')
result.textContent = pos;
// переходим по координатам
myMap.panTo(destinations[pos], {
flying: 1
});
return false;
}
// навешиваем обработчики
var col = document.getElementsByClassName('goto');
for (var i = 0, n = col.length; i < n; ++i) {
col[i].onclick = clickGoto;
result.textContent = result.textContent + ' ' + i;
}
}
Перейти
Перейти
Перейти
Так вообще не работает не кастомный значок не клик:
//Дождёмся загрузки API и готовности DOM. ymaps.ready(init); function init() { // в этой версии координаты просто элементы массива (и они поменяны местами) destinations = { 'Москва': [55.753559, 37.609218], 'Санкт-Петербург': [59.938531, 30.313497], 'Екатеринбург': [56.829748, 60.617435], 'Одесса': [46.466444, 30.7058] }, // Создание экземпляра карты и его привязка к контейнеру с // заданным id ("map"). myMap = new ymaps.Map('map', { center: destinations['Москва'], zoom: 10, controls: [] }); // куда скакать function clickGoto() { // город var pos = this.getAttribute('data-goto'); // или this.getAttribute('title') result.textContent = pos; // переходим по координатам myMap.panTo(destinations[pos], { flying: 1 }); return false; } // навешиваем обработчики var col = document.getElementsByClassName('goto'); for (var i = 0, n = col.length; i < n; ++i) { col[i].onclick = clickGoto; result.textContent = result.textContent + ' ' + i; } var myPlacemark = new ymaps.Placemark(destinations['Москва'], { }, { iconImageHref: 'map-icon.png', iconImageSize: [79, 96], iconImageOffset: [0, -50], }); /* Добавляем */ myMap.geoObjects .add(myPlacemark); } Перейти
Перейти
Перейти
Перейти
Помогите пожалуйста в решении проблемы!!!
Заранее не известны все адреса, редактироваться будут только через data атрибут а не через скрипт, поэтому прописывать вручную все адреса в destinations нет смысла.
Вообщем есть ссылки с адресами типа строки, карта. Как осуществить отображение нужного адреса на карте по клику на ссылку с этим самым адресом?
Ответ
Необходимо добавить Киев с массив destination, чтобы иметь возможность переходить на него
В API 2.0 несколько другой способ добавления маркеров
Привести в порядок атрибуты href для ссылок не помешает.
Минимально модифицировав ваш код, получилось так:
//Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init() {
var result = document.getElementById('result'),
myMap = new ymaps.Map('map', {
center: [55.753559, 37.609218], // Москва
zoom: 12
});
// все ок
result.textContent = 'map init';
// куда скакать
function clickGoto() {
// город
var city = this.getAttribute('data-goto'); // или this.getAttribute('title')
result.textContent = city;
// получение координат по адресу - асинхронная функция
var myGeocoder = ymaps.geocode(city);
myGeocoder.then(
function(res) {
coords = res.geoObjects.get(0).geometry.getCoordinates();
// переходим по координатам
myMap.panTo(coords, {
flying: 1
});
// добавляем маркер
var placeMark = new ymaps.Placemark(coords, {
balloonContent: city
});
myMap.geoObjects.add(placeMark);
},
function(err) {
alert('Ошибка');
}
);
return false;
}
// навешиваем обработчики
var col = document.getElementsByClassName('goto');
for (var i = 0, n = col.length; i < n; ++i) {
col[i].onclick = clickGoto;
result.textContent = result.textContent + ' ' + i;
}
}
Украина, Киев, улица Крещатик, 1/2
Россия, Свердловская область, Екатеринбург, проспект Ленина, 1
Украина, Одесса, Приморский бульвар, 1
В идеале - хранить инфо о том, какие маркеры уже созданы, чтобы не создавать их снова, но вроде бы yandex их не дублирует.
Комментариев нет:
Отправить комментарий