Нужна помощь в выводе правильного содержимого балуна

Пост в архиве.

Жуковский Павел

23 апреля 2017, 17:10

Всем привет.

Есть вот такая карта

http://jsfiddle.net/igramnet/u6dt7ay8/1/

Задача:

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

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

Помогите, пожалуйста.

6 комментариев

Авторизуйтесь, чтобы оставить комментарий

dimik

24 апреля 2017, 08:40

Там где вы добавляете результат поиска на карту, добавляйте вместо него свою метку, с координатами результата и своим содержимым балуна
mySearchResults.add(res);

->
mySearchResults.add(new ymaps.Placemark(res.geometry.getCoordinates(), {balloonContent: '...'}));
Да и кажется, что вместо метки нужно сразу балун открывать – зачем заставлять пользователя делать лишний клик?

Обновлено 24 апреля 2017, 08:52

Жуковский Павел

25 апреля 2017, 10:13

dimik,

что-то по Вашему методу не работает. Лишний клик согласен, не нужен. Не могли бы Вы привести более детальные правки в код (или сам код)?

Спасибо.

dimik

25 апреля 2017, 18:34

Жуковский Павел,

ymaps.ready(init);
var myMap;
function init() {
var geolocation = ymaps.geolocation,
myMap = new ymaps.Map('map_2', {
center: [55.7467, 37.6607],
zoom: 16,
controls: []
}),
// Создаем экземпляр класса ymaps.control.SearchControl
mySearchControl = new ymaps.control.SearchControl({
options: {
noPlacemark: true
}
}),
// Результаты поиска будем помещать в коллекцию.
mySearchResults = new ymaps.GeoObjectCollection(null, {
hintContentLayout: ymaps.templateLayoutFactory.createClass('$[properties.name]')
});
myMap.controls.add(mySearchControl);
myMap.geoObjects.add(mySearchResults);
// При клике по найденному объекту метка становится красной.
mySearchResults.events.add('click', function(e) {
if (!myMap.balloon.isOpen()) {
var coords = e.get('coords');
myMap.balloon.open(coords, {
contentHeader: 'Ваш адрес',
contentBody: 'Скопируйте эти координаты и вставьте в форму ниже. ' + [
coords[0].toPrecision(6),
coords[1].toPrecision(6)
].join(', ') + '',
contentFooter: ''
});
}
});
// Выбранный результат помещаем в коллекцию.
mySearchControl.events.add('resultselect', function(e) {
var index = e.get('index');
mySearchControl.getResult(index).then(function(res) {
balloonOpen(res.geometry.getCoordinates());
});
}).add('submit', function() {
// mySearchResults.removeAll();
})
geolocation.get({
provider: 'yandex',
mapStateAutoApply: true
}).then(function(result) {
myMap.geoObjects.add(result.geoObjects);
});
geolocation.get({
provider: 'browser',
mapStateAutoApply: true
}).then(function(result) {
myMap.geoObjects.add(result.geoObjects);
}); // Обработка события, возникающего при щелчке
// левой кнопкой мыши в любой точке карты.
// При возникновении такого события откроем балун.
myMap.events.add('click', function(e) {
balloonOpen(e.get('coords'));
});
function balloonOpen(coords) {
if (!myMap.balloon.isOpen()) {
myMap.balloon.open(coords, {
contentHeader: 'Ваш адрес',
contentBody: 'Скопируйте эти координаты и вставьте в форму ниже. ' + [
coords[0].toPrecision(6),
coords[1].toPrecision(6)
].join(', ') + '',
contentFooter: ''
});
} else {
myMap.balloon.close();
}
}
myMap.events.add('balloonopen', function(e) {
myMap.hint.close();
});
}

Жуковский Павел

25 апреля 2017, 22:18

dimik,

огромное спасибо! Все работает неплохо. Но есть один вот такой баг. Реально ли его исправить? https://youtu.be/Kp2hydehJHQ

dimik

25 апреля 2017, 22:33

Жуковский Павел,

ymaps.ready(init);
var myMap;
function init() {
var geolocation = ymaps.geolocation,
myMap = new ymaps.Map('map_2', {
center: [55.7467, 37.6607],
zoom: 16,
controls: []
}),
// Создаем экземпляр класса ymaps.control.SearchControl
mySearchControl = new ymaps.control.SearchControl({
options: {
noPlacemark: true
}
});
myMap.controls.add(mySearchControl);
// Выбранный результат помещаем в коллекцию.
mySearchControl.events.add('resultselect', function(e) {
var index = e.get('index');
mySearchControl.getResult(index).then(function(res) {
balloonOpen(res.geometry.getCoordinates(), true);
});
}).add('submit', function() {
// mySearchResults.removeAll();
});
geolocation.get({
provider: 'yandex',
mapStateAutoApply: true
}).then(function(result) {
myMap.geoObjects.add(result.geoObjects);
});
geolocation.get({
provider: 'browser',
mapStateAutoApply: true
}).then(function(result) {
myMap.geoObjects.add(result.geoObjects);
}); // Обработка события, возникающего при щелчке
// левой кнопкой мыши в любой точке карты.
// При возникновении такого события откроем балун.
myMap.events.add('click', function(e) {
balloonOpen(e.get('coords'));
});
function balloonOpen(coords, checkOpen) {
if (!myMap.balloon.isOpen() || checkOpen) {
myMap.balloon.open(coords, {
contentHeader: 'Ваш адрес',
contentBody: 'Скопируйте эти координаты и вставьте в форму ниже. ' + [
coords[0].toPrecision(6),
coords[1].toPrecision(6)
].join(', ') + '',
contentFooter: ''
});
} else {
myMap.balloon.close();
}
}
myMap.events.add('balloonopen', function(e) {
myMap.hint.close();
});
}

Жуковский Павел

26 апреля 2017, 11:00

dimik,

огромное спасибо!