Клуб API Карт

скрытие меток и балунов

chekostroy
12 августа 2009, 10:59

Хочу реализовать показ-скрытие балунов и меток по чекбоксу. Но не знаю с какого конца подойти. Может кто поможет примером?

Нужно что бы по отжатию чекбокса метки с карты становились невидимыми.

8 комментариев
Подписаться на комментарии к посту
Взгляните на этот пример:
http://hevil.narod.ru/kiev.html

На его основе сможете сделать свой с чекбоксами. Если возникнут еще вопросы - пишите.
Спасибо! Пример очень здорово помог. Но теперь появились вопросы. самое главное: Каким способом легче всего каждой группе меток присвоить свою иконку? И как сделать так, чтобы эта иконка отражалась перед, допустим "Покушайки" в вышеприведённом примере
Необходимо группе меток задать свой стиль с пользовательским значком. В руководстве разработчика повествуется о том, как задать свой значок для одной метки:
http://api.yandex.ru/maps/jsapi/doc/dg/concepts/markers_icon_custom.xml

Также можно задать стиль и для группы объектов - YMaps.GeoObjectCollection.

А т.к. Вы знаете ссылки на изображения значков, то соответственно сможете и разместить их в меню.

что-то не получается. Вместо своих значков - дефолтные.

Вот кусок кода...

  window.onload = function () {
  map = new YMaps.Map(document.getElementById("YMapsID"));
  map.setCenter(new YMaps.GeoPoint(47.264796,56.009401), 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());

  var typeControl = new YMaps.TypeControl();
  var s = new YMaps.Style();
  s.iconStyle = new YMaps.IconStyle("example#customPointIcon");
  s.iconStyle.offset = new YMaps.Point(-22, -46);
  s.iconStyle.href = "http://info.maps.yandex.net/api/i/steelblue/dot.png";
  s.iconStyle.size = new YMaps.Point(26, 46);
  s.iconStyle.shadow = new YMaps.IconShadowStyle();
  s.iconStyle.shadow.offset = new YMaps.Point(0, -25);
  s.iconStyle.shadow.href = "http://info.maps.yandex.net/api/i/dot_shadow.png";
  s.iconStyle.shadow.size = new YMaps.Point(25, 23);
  YMaps.Styles.add("example#customPoint", s);

  var groups = new GroupList(map, document.getElementById('menu'));

  groups.add(createGroup('Фоторадары', [
{name:'метка1 ',description:'',point:[47.382880,56.124640]},
{name:'метка2 ',description:'',point:[47.382171,56.124676]},
{name:'метка3',description:'',point:[47.402855,56.123490]},
{name:'метка4 ',description:'',point:[47.400840,56.123624]},
{name:'метка5',description:'',point:[47.333019,56.127006]},
{name:'метка6',description:'',point:[47.201558,56.132868]},
{name:'метка7',description:'',point:[47.201524,56.132872]},
{name:'метка8',description:'',point:[47.254143,56.117218]},
{name:'метка9',description:'',point:[47.254143,56.117218]},
{name:'метка10',description:'',point:[47.236710,56.146134]},
{name:'метка11',description:'',point:[47.234005,56.122383]}
  ], {style: "example#customPoint"}));

Вы забыли шаблон:
var t = new YMaps.Template("onStyle.size.y];width:$[style.iconStyle.size.x];\" src=\"$[style.iconStyle.href]\"\/>>$[name|0]");
            YMaps.Templates.add("example#customPointIcon", t);

Либо можете просто изменить:
s.iconStyle = new YMaps.IconStyle("example#customPointIcon");
на
s.iconStyle = new YMaps.IconStyle();
Хм... С лыжами наверняка всё нормально. А вот с головой... Нифига не работает. Проще ещё раз привести кусок window.onload = function () { map = new YMaps.Map(document.getElementById("YMapsID")); map.setCenter(new YMaps.GeoPoint(47.264796,56.009401), 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()); var typeControl = new YMaps.TypeControl(); var s = new YMaps.Style(); s.iconStyle = new YMaps.IconStyle("example#customPointIcon"); s.iconStyle.offset = new YMaps.Point(-22, -46); s.iconStyle.href = "http://info.maps.yandex.net/api/i/steelblue/dot.png"; s.iconStyle.size = new YMaps.Point(26, 46); s.iconStyle.shadow = new YMaps.IconShadowStyle(); s.iconStyle.shadow.offset = new YMaps.Point(0, -25); s.iconStyle.shadow.href = "http://info.maps.yandex.net/api/i/dot_shadow.png"; s.iconStyle.shadow.size = new YMaps.Point(25, 23); YMaps.Styles.add("example#customPoint", s); var t = new YMaps.Template("$[name|0]"); YMaps.Templates.add("example#customPointIcon", t); var groups = new GroupList(map, document.getElementById('menu')); groups.add(createGroup('Фоторадары', [ {name:'метка1 ',description:'',point:[47.382880,56.124640]}, {name:'метка2 ',description:'',point:[47.382171,56.124676]}, {name:'метка3',description:'',point:[47.402855,56.123490]}, {name:'метка4 ',description:'',point:[47.400840,56.123624]}, {name:'метка5',description:'',point:[47.333019,56.127006]}, {name:'метка6',description:'',point:[47.201558,56.132868]}, {name:'метка7',description:'',point:[47.201524,56.132872]}, {name:'метка8',description:'',point:[47.254143,56.117218]}, {name:'метка9',description:'',point:[47.254143,56.117218]}, {name:'метка10',description:'',point:[47.236710,56.146134]}, {name:'метка11',description:'',point:[47.234005,56.122383]} ], {style: "example#customPoint"})); ...... function createGroup (title, objects, style) { var group = new YMaps.GeoObjectCollection(style); group.title = title; for (var i = 0, placemark, l = objects.length; i < l; i++) { placemark = new YMaps.Placemark(new YMaps.GeoPoint(objects[i].point[0], objects[i].point[1])); placemark.setBalloonContent('

' + objects[i].name + '

' + objects[i].description + '

'); group.add(placemark); } return group; } Вот... Если ставить group.add(placemark,{style: "example#customPoint"}) то всё работает. Но тогда, понятное дело, этот значок присваивается всем группам.
Обратите внимание на эту строчку:
 function createGroup (title, objects, style) {

Стиль для группы передается в качестве параметра, а присваивается в этой строчке:
var group = new YMaps.GeoObjectCollection(style);

Шаблон оберните в контейнер.
var t = new YMaps.Template("\"123\"$[name|0]")
Также используйте версию 1.1, а не 1.0.