Приветствую участников и гостей клуба API.Яндекс.Карт!
Я уже как две недели "парюсь" над соединением трех js уроков:
- Вывод поиска в отдельную строку
- Создание собственного значка для метки (ну и балуна тоже)
Получается полная пурга, которая работает частично:
var map, geoResult;
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание стиля для значка метки
// Создание экземпляра карты и его привязка к созданному контейнеру
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
// Добавление элементов управления
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());
// Значок для группы 1
var gruppa1 = new YMaps.Style();
gruppa1.iconStyle = new YMaps.IconStyle();
gruppa1.iconStyle.href = "/i/maps/icons/photo.png";
gruppa1.iconStyle.size = new YMaps.Point(18, 29);
gruppa1.iconStyle.offset = new YMaps.Point(-9, -29);
gruppa1.iconStyle.shadow = new YMaps.IconShadowStyle();
gruppa1.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
gruppa1.iconStyle.shadow.size = new YMaps.Point(18, 29);
gruppa1.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
gruppa1.balloonContentStyle = new YMaps.BalloonContentStyle(
new YMaps.Template("<div style=\"color:green\">$[description]</div>"));
// Значок для группы 2
var gruppa2 = new YMaps.Style();
gruppa2.iconStyle = new YMaps.IconStyle();
gruppa2.iconStyle.href = "/i/maps/icons/photo.png";
gruppa2.iconStyle.size = new YMaps.Point(18, 29);
gruppa2.iconStyle.offset = new YMaps.Point(-9, -29);
gruppa2.iconStyle.shadow = new YMaps.IconShadowStyle();
gruppa2.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
gruppa2.iconStyle.shadow.size = new YMaps.Point(18, 29);
gruppa2.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
gruppa2.balloonContentStyle = new YMaps.BalloonContentStyle(
new YMaps.Template("<div style=\"color:green\">$[description]</div>"));
// Значок для группы 3
var gruppa3 = new YMaps.Style();
gruppa3.iconStyle = new YMaps.IconStyle();
gruppa3.iconStyle.href = "/i/maps/icons/photo.png";
gruppa3.iconStyle.size = new YMaps.Point(18, 29);
gruppa3.iconStyle.offset = new YMaps.Point(-9, -29);
gruppa3.iconStyle.shadow = new YMaps.IconShadowStyle();
gruppa3.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
gruppa3.iconStyle.shadow.size = new YMaps.Point(18, 29);
gruppa3.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
gruppa3.balloonContentStyle = new YMaps.BalloonContentStyle(
new YMaps.Template("<div style=\"color:green\">$[description]</div>"));
// Значок для группы 4
var gruppa4 = new YMaps.Style();
gruppa4.iconStyle = new YMaps.IconStyle();
gruppa4.iconStyle.href = "/i/maps/icons/photo.png";
gruppa4.iconStyle.size = new YMaps.Point(18, 29);
gruppa4.iconStyle.offset = new YMaps.Point(-9, -29);
gruppa4.iconStyle.shadow = new YMaps.IconShadowStyle();
gruppa4.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
gruppa4.iconStyle.shadow.size = new YMaps.Point(18, 29);
gruppa4.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
gruppa4.balloonContentStyle = new YMaps.BalloonContentStyle(
new YMaps.Template("<div style=\"color:green\">$[description]</div>"));
// Значок для геокодирования
var here = new YMaps.Style();
here.iconStyle = new YMaps.IconStyle();
here.iconStyle.href = "/i/maps/icons/photo.png";
here.iconStyle.size = new YMaps.Point(18, 29);
here.iconStyle.offset = new YMaps.Point(-9, -29);
here.iconStyle.shadow = new YMaps.IconShadowStyle();
here.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
here.iconStyle.shadow.size = new YMaps.Point(18, 29);
here.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
here.balloonContentStyle = new YMaps.BalloonContentStyle(
new YMaps.Template("<div style=\"color:green\">$[description]</div>"));
// Группы объектов
var groups = [
createGroup("<p class=\"stadions\">Группа 1</p>", [
createPlacemark(new YMaps.GeoPoint(37.538376,55.715837), "Монумент \"Родина-Мать\""),
createPlacemark(new YMaps.GeoPoint(37.664719,55.6949), "Памятник \"Богдану Хмельницкому\""),
createPlacemark(new YMaps.GeoPoint(37.605668,55.811073), "Арка Дружбы народов")
], "gruppa1"),
createGroup("<p class=\"gar\">Группа 2</p>", [
createPlacemark(new YMaps.GeoPoint(37.444993,55.715837), "Ресторан \"Калинка-Малинка\"", "пр.Владимира Маяковского, 47"),
createPlacemark(new YMaps.GeoPoint(37.683945,55.685592), "Бар \"Сало-бар\"", "ул. Анри Барбюса, 5а"),
createPlacemark(new YMaps.GeoPoint(37.718278,55.665415), "Абсент-бар \"Палата №6\"", "бульвар Воровского, 31а"),
createPlacemark(new YMaps.GeoPoint(37.683945,55.756128), "Ресторан \"Спотыкач\"", "Владимирская,16")
], "gruppa2"),
createGroup("<p class=\"zelenka\">Группа 3</p>", [
createPlacemark(new YMaps.GeoPoint(37.464219,55.719713), "Музей грамзаписи и старинных музыкальных инструментов"),
createPlacemark(new YMaps.GeoPoint(37.725144,55.801792), "Музей истории медицины или Анатомический театр"),
createPlacemark(new YMaps.GeoPoint(37.460099,55.694125), "Музей воды. Водно-информационный центр")
], "gruppa3"),
createGroup("<p class=\"sportzal\">Группа 4</p>", [
createPlacemark(new YMaps.GeoPoint(37.788315,55.660757), "Замок Ричарда-Львиное сердце"),
createPlacemark(new YMaps.GeoPoint(37.483445,55.783223), "\"Дом с химерами\""),
createPlacemark(new YMaps.GeoPoint(37.63588,55.750707), "Дом Рыцаря")
], "gruppa4")
];
// Создание списка групп
for (var i = 0; i < groups.length; i++) {
addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
}
// Добавление одного пункта в список
function addMenuItem (group, map, menuContainer) {
// Показать/скрыть группу на карте
YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.title + "</a>")
.bind("click", function () {
var link = YMaps.jQuery(this);
// Если пункт меню "неактивный", то добавляем группу на карту,
// иначе - удаляем с карты
if (link.hasClass("active")) {
map.removeOverlay(group);
} else {
map.addOverlay(group);
}
// Меняем "активность" пункта меню
link.toggleClass("active");
return false;
})
// Добавление нового пункта меню в список
.appendTo(
YMaps.jQuery("<div></div>
").appendTo(menuContainer ) )
};
// Создание группы
function createGroup (title, objects, style) {
var group = new YMaps.GeoObjectCollection(style);
group.title = title;
group.add(objects);
return group;
};
// Создание метки
function createPlacemark (point, name, description) {
var placemark = new YMaps.Placemark(point);
placemark.name = name;
placemark.description = description;
return placemark
}
});
// Функция для отображения результата геокодирования
// Параметр value - адрес объекта для поиска
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);
this.setStyle("here");
map.addOverlay(geoResult);
map.setBounds(geoResult.getBounds());
}else {
alert("Ничего не найдено")
}
});
// Процесс геокодирования завершен неудачно
YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {
alert("Произошла ошибка: " + error);
})
};
По этому коду поиск работает, группы показываются, но вот со значками беда, указаны дефолтные :(
Как это исправить и есть ли варианты более короткого и грамотного кода, который далее можно было бы экспортировать из MySQL?