HTML
16
Вклад в тег
<div class="img" id="YMapsID">
</div>
<script src="http://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
<script type="text/javascript">
// Создает обработчик события window.onLoad
YMaps.jQuery(function () {
// Создает экземпляр карты и привязывает его к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
map.setCenter(new YMaps.GeoPoint(30.349234, 59.940919), 15);
// Создает стиль
var s = new YMaps.Style();
// Создает стиль значка метки
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.href = "img/map.png";
s.iconStyle.size = new YMaps.Point(140, 139);
s.iconStyle.offset = new YMaps.Point(-140, -139);
// Создает метку
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.349234, 59.940919), {style: s});
var placemark2 = new YMaps.Placemark(new YMaps.GeoPoint(30.249336, 60.015226), {style: s});
// Устанавливает содержимое балуна
placemark.name = "Плов без слов";
placemark.description = "Литейный пр., 28";
placemark2.name = "Плов без слов";
placemark2.description = "Комендатский пр., 30";
// Создает группу меток
var group = new YMaps.GeoObjectCollection();
group.add(placemark);
group.add(placemark2);
// Добавляет группу меток на карту
map.addOverlay(group);
// Действия при добавлении элемента на карту
function OfficeNavigator (offices) {
this.onAddToMap = function (map, position) {
this.container = YMaps.jQuery("<ul></ul>")
this.map = map;
this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(10, 10));
// CSS-свойства, определяющие внешний вид элемента
this.container.css({
position: "absolute",
zIndex: YMaps.ZIndex.CONTROL,
listStyle: 'none',
padding: '10px',
margin: 0
});
// Формирует список офисов
this._generateList();
// Располагает элемент управления в верхнем правом углу карты
this.position.apply(this.container);
// Добавляет элемент управления на карту
this.container.appendTo(this.map.getContainer());
}
// Обработчик удаления элемента управления с карты
this.onRemoveFromMap = function () {
if (this.container.parent()) {
this.container.remove();
this.container = null;
}
this.map = null;
};
// Формирует выпадающий список офисов
this._generateList = function () {
var _this = this;
// Вызывает функцию-обработчик для каждого объекта
offices.forEach(function (obj) {
// Создает ссылку на объект
var li = YMaps.jQuery("<li><a href=\"#\">" + obj.description + "</li>"),
a = li.find("a");
// Создает обработчик щелчка мыши по ссылке
li.bind("click", function () {
_this.map.panTo(obj.getGeoPoint(), {
flying: 1,
callback: function () {
size: "large";
}
});
return false;
});
// Создает слушатели событий открытия и закрытия балуна объекта
YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
a.css("text-decoration", "none");
});
YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
a.css("text-decoration", "");
});
// Добавляет ссылку на объект в общий список
li.appendTo(_this.container);
});
};
}
// Создает элемент управления "Путеводитель по офисам"
map.addControl(new OfficeNavigator(group));
// Добавляет метку на карту
/*
map.addOverlay(placemark);
map.addOverlay(placemark2);
*/
// Создает элемент масштабирования
var smallZoomControl = new YMaps.SmallZoom();
map.addControl(smallZoomControl);
})
</script>