Вопрос по меткам

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

Андрей А.

28 августа 2009, 14:40

Искал ответ на мой вопрос у Вас в клубе так и не нашел, решил создать новую тему

Я создал карту, на ней находяться метки. Мне хотелось бы чтобы при нажатии на метку масштаб увеличивался со страны до улицы, и при закрытии текста карта возвращалась в исходный масштаб. Прилагаю кусочек своего кода.

В худшем случае хотелось бы чтоб хотя бы при клике на метку масштаб для этой метки увеличивался.

Сделал дополнительно геокодирование все находит прекрасно, но при геокодировании помиом моей метки выставляется еще одна, ккак сделать чтоб показывалась только моя метка? Ну и попутно, если никого не затруднит, списко при геокодировании у меня большой, надо прокручивать вниз страницу. Как сделать чтоб при нажатии на ссылку страница поднималась вверх на саму карту? можно ли для геокодера указать не сам адрес, а географические координаты точки?

<script type="text/javascript">
var map, geoResult;

window.onload = function () {
map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(64.411847,63.187668), 3, YMaps.MapType.MAP);
map.addControl(new YMaps.TypeControl());

var point = new YMaps.GeoPoint(37.617518,55.652847);
var placemark = new YMaps.Placemark(point);
placemark.setIconContent ('<b>Москва</b>');
placemark.description = '<div style=«text-align:center»><strong>М.видео-сервис</strong><br> м. "Варшавская", Чонгарский бульвар,д.3.<br> (495) 744-01-10<br/></div> ';
map.addOverlay(placemark);
}

function showAddress (value) {
map.removeOverlay(geoResult);
var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
if (this.length()) {
geoResult = this.get(0);
map.addOverlay(geoResult);
map.setBounds(geoResult.getBounds());
}else {
alert("Ничего не найдено")
}
});
}
</script>

и кусочек кода где прописана ссылка

<tr height="21">
<td height="21">г. Москва</td>
<td><a href="javascript:showAddress('Москва, Чонгарский бульвар, д.3')">М.видео-сервис</a></td>
<td>м. "Варшавская", Чонгарский бульвар,д.3.</td>
<td>(495) 744-01-10</td>
</tr>

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

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

rodlex

28 января 2016, 08:25

Для того, чтобы при щелчке по метке масштаб увеличивался, необходимо создать обработчик для события BalloonOpen и BalloonClose.

var placemark = new YMaps.Placemark(map.getCenter());
map.addOverlay(placemark);

// Открытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () {
map.setZoom(16);
});

// Закрытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function () {
map.setZoom(10);
});

Чтобы при геокодировании не добавлялась метка на карту, необходимо убрать строчку:

map.addOverlay(geoResult);

Геокодер возвращает группу меток класса YMaps.GeocoderResult. Для того, чтобы получить координаты одного из найденного результата, необходимо вызвать метод getGeoPoint().
YMaps.Events.observe(geocoder, geocoder.Events.Load,

function () {
    if (this.length()) {
        geoResult = this.get(0);
        alert("Географические координаты: " + geoResult.getGeoPoint());
        map.setBounds(geoResult.getBounds());
    }else {
        alert("Ничего не найдено")
    }
});

Андрей А.

28 января 2016, 08:25

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

Но функция работает не совсем точно, скорее всего я неправильно ее применил. Я не програмист. Для балунов функция работает как надо но есть одна заковырка.

Когда только карта открылась она установлена точкой в центр, при нажатии на метку Москва, но приближает мне центр карты. Если я нажимаю строчку по геокодированию то все хорошо работает карта на том месте где нужно балун открыт. и после этого он работает как надобно. Нажав на другую метку Владимир он обрабатывает все равно данные последней точки, в данном случае Москва.

То есть проблема в том что предложеная Вами функция работает не с определеной меткой на которую нажимаешь , а только с той с кторой было произведено действие геокодирования.

Надеюсь я правильно выложил суть проблемы :-) Очень надеюсь что Вы поможете мне в решении данной проблемы.

Прилагаю код

var map, geoResult;

window.onload = function () {
map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(64.411847,63.187668), 3, YMaps.MapType.MAP);
map.addControl(new YMaps.TypeControl());

var point = new YMaps.GeoPoint(37.617518,55.652847);
var placemark = new YMaps.Placemark(point);
map.addOverlay(placemark);
// Открытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () {
map.setZoom(16);
});

// Закрытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function () {
map.setZoom(3);
});
placemark.setIconContent ('Москва');
placemark.description = '>М.видео-сервисstrong>
м. "Варшавская", Чонгарский бульвар,д.3.
(495) 744-01-10
';

var point = new YMaps.GeoPoint(40.478114,56.169603);
var placemark = new YMaps.Placemark(point);
map.addOverlay(placemark);
// Открытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () {
map.setZoom(16);
});

// Закрытие балуна
YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function () {
map.setZoom(3);
});
placemark.setIconContent ('Владимир');
placemark.description = 'ООО "Рост-Сервис"
ул.Юбилейная, д. 60
(4922) 21-44-24
';

}

function showAddress (value) {
;
var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
if (this.length()) {
geoResult = this.get(0);

map.setBounds(geoResult.getBounds());
}else {
alert("Ничего не найдено")
}
});
}

rodlex

28 января 2016, 08:25

Воспользуйтесь методом setCenter, чтобы центрировать карту и изменять масштаб одновременно.

Можно, например, сделать так:

window.onload = function () {
    map = new YMaps.Map(document.getElementById("YMapsID"));
    map.setCenter(new YMaps.GeoPoint(38.9,55.68), 7, YMaps.MapType.MAP);
    map.addControl(new YMaps.TypeControl());

    map.addOverlay(createPlacemark(new YMaps.GeoPoint(37.617518,55.652847), 7, 10, {
        icon: "Москва",
        description: "Москва - столица РФ"
    }));

    map.addOverlay(createPlacemark(new YMaps.GeoPoint(40.478114,56.169603), 7, 10, {
        icon: "Владимир",
        description: "Владимир - административный центр Владимирской области"
    }));

}

// Функция для создания метки
function createPlacemark (point, minZoom, maxZoom, content) {
    var placemark = new YMaps.Placemark(point);

    // Устанавливаем содержимое
    placemark.setIconContent(content.icon);
    placemark.description = content.description;

    // Открытие балуна
    YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () {
        map.setCenter(point, maxZoom);
    });

    // Закрытие балуна
    YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function () {
        map.setCenter(point, minZoom);
    });

    return placemark;
}

Андрей А.

28 января 2016, 08:25

Спасибо огроиное, все работает как положено! Очень выручили меня!

Еще одна маленькая просьба, когда выводиться результат по геокодированию балун закрытый, как сделать чтоб при выводе результата геокодирования балун открывался?

опять прилагаю код

rodlex

28 января 2016, 08:25

Воспользуйтесь методом openBalloon().

Андрей А.

28 января 2016, 08:25

пробывал его по разному вставь этот метода ничего не получается(((( балун не открывается.........

rodlex

28 января 2016, 08:25

geoResult = this.get(0);
geoResult.openBalloon();

Андрей А.

28 января 2016, 08:25

я так делал, не работает.

вот код функции геокодера:

rodlex

28 января 2016, 08:25

Вначале оверлей нужно добавить на карту, а потом у него открывать балун.

var geoResult = this.get(0);
map.setBounds(geoResult.getBounds());
map.addOverlay(geoResult);
geoResult.openBalloon();

Андрей А.

28 января 2016, 08:25

оверлеи добавляються отдельно, вообщем вот ссылочка http://www.russia.zelmer.com/service_centre/ Вы можете ознакомиться с кодом.

Извиняюсь что так долго мучаю вас...........

rodlex

28 января 2016, 08:25

Для того, чтобы открывать балун у добавленных меток, необходимо сохранить ссылку на них.
Например,

var placemark = new YMaps.Placemark(map.getCenter());
placemark.name = "Имя метки";
placemark.description = "Описание метки";
...
YMaps.jQuery("#MyLink").bind("click", function () {
placemark.openBalloon();
return false;
})

Имеется ввиду, что в HTML-коде у Вас есть элемент с ID = "MyLink":

открыть балун

Вы можете передавать в функцию createPlacemark указатель на dom-элемент при щелчке на котором будет открываться балун.

// Функция для создания метки
function createPlacemark (point, minZoom, maxZoom, content, link) {
    var placemark = new YMaps.Placemark(point);
    // Устанавливаем содержимое
    placemark.setIconContent(content.icon);
    placemark.description = content.description;

    link.bind("click", function () {
        placemark.openBalloon();
        return false;
    });

    // Открытие балуна
    YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () {
        map.setCenter(point, maxZoom);
    });
    // Закрытие балуна
    YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function () {
        map.setCenter(point, minZoom);
    });
    return placemark;
}

Соответственно пример вызова такой:

map.addOverlay(createPlacemark(new YMaps.GeoPoint(61.428075,55.178671), 3, 16, {
icon: "Имя метки",
description: "Описание метки"
}, YMaps.jQuery("#MyLink")));