Клуб API Карт

Вопрос по перехвату событий.

Hanych Taras
13 августа 2009, 11:45

Сразу скажу. Я первый раз работаю с яндекс картами. Знания Ява Скрипт очень даже скудные.


Вот карта которую я пытаюсь сделать. Все получается, но чуток застрял на вот такой задаче ...

 

http://sever.pro/index.php?dn=faq


На карте я выставил флажки.


//Таблица адресов
   
  // 165EK14
  var point = new YMaps.GeoPoint(37.54418, 55.928718);
  var placemark = new YMaps.Placemark(point);
  placemark.name = "165EK14";
  map.addOverlay(placemark);

Каждый из них символизует номер дома. Дальше, мне нужно перехватить событие. А именно клик по одному из флашков. В результате, номер дома должен автоматически попасть в поле формы с именем Ваш адрес.


В целом, в примерах я нашол как перехватить событие клик по любому месту карты.


YMaps.Events.observe(map,map.Events.Click, function () {
  document.getElementById("address").innerHTML = "Привет";
  });

Как результат, в поле


<textarea id="address" cols="40" style="width:23em; height:5em" rows="11" name="address"></textarea>

появляется слово привет. Вот примерно тоже самое но, нужно чтобы при условии что пользователь кликнул на одном из флажков, в это поле скинуло значение номера дома.

 


<script type="text/javascript">
  window.onload = function () {
  var map = new YMaps.Map(document.getElementById("YMapsID"));
  /*
  YMaps.Events.observe(map,map.Events.Click, function () {
  document.getElementById("address").innerHTML = span.x;
  });
  */
   
   
  map.setCenter(new YMaps.GeoPoint(37.54602154767088, 55.92136959162388), 14, YMaps.MapType.HYBRID);
  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());
  map.addControl(new YMaps.SearchControl());
  var bounds = map.getBounds(),
  pointLb = bounds.getLeftBottom(),
  span = bounds.getSpan();
   
  //Таблица адресов
   
  // 165EK14
  var point = new YMaps.GeoPoint(37.54418, 55.928718);
  var placemark = new YMaps.Placemark(point);
  placemark.name = "165EK14";
  map.addOverlay(placemark);
  // 165EK10
  var point = new YMaps.GeoPoint(37.542294, 55.927932);
  var placemark = new YMaps.Placemark(point);
  placemark.name = "165EK10";
  map.addOverlay(placemark);
  // 165EK9
  var point = new YMaps.GeoPoint(37.540443, 55.926857);
  var placemark = new YMaps.Placemark(point);
  placemark.name = "165EK9";
  map.addOverlay(placemark);
  // 165EK7
  var point = new YMaps.GeoPoint(37.545015, 55.926524);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165EK6
  var point = new YMaps.GeoPoint(37.544342, 55.925763);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165EK5
  var point = new YMaps.GeoPoint(37.542464, 55.925707);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165EK1
  var point = new YMaps.GeoPoint(37.54383, 55.924936);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165EK3
  var point = new YMaps.GeoPoint(37.541117, 55.924522);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165ДK6
  var point = new YMaps.GeoPoint(37.543246, 55.923639);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165ДK5
  var point = new YMaps.GeoPoint(37.540883, 55.92312);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165ДK4
  var point = new YMaps.GeoPoint(37.542581, 55.922585);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165ДK1
  var point = new YMaps.GeoPoint(37.542581, 55.922585);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
  // 165ДK2
  var point = new YMaps.GeoPoint(37.541943, 55.921481);
  var placemark = new YMaps.Placemark(point);
  map.addOverlay(placemark);
   
  YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
  var myHtml = "Значение: " + mEvent.getGeoPoint() + " на масштабе " + map.getZoom();
  map.openBalloon(mEvent.getGeoPoint(), myHtml);
  });
   
  };
  </script>

 

Буду благодарен за оказанную помощь.

 

3 комментария
Подписаться на комментарии к посту
Вообще, cut для кого придумывали?
Для группы меток лучше воспользоваться классом группы (например, YMaps.GeoObjectCollection):

// Создаем группу, в которую добавляем метки
var group = new YMaps.GeoObjectCollection('default#greenSmallPoint');
group.add(createPlacemark(new YMaps.GeoPoint(37.54418, 55.928718), '165EK14'));
group.add(createPlacemark(new YMaps.GeoPoint(37.542294, 55.927932), '165EK10'));
group.add(createPlacemark(new YMaps.GeoPoint(37.540443, 55.926857), '165EK9'));
group.add(createPlacemark(new YMaps.GeoPoint(37.545015, 55.926524), '165EK7'));
group.add(createPlacemark(new YMaps.GeoPoint(37.544342, 55.925763), '165EK6'));
group.add(createPlacemark(new YMaps.GeoPoint(37.542464, 55.925707), '165EK5'));
map.addOverlay(group);

Метку создаются однотипно, поэтому целесообразно для этого сделать отдельную функцию:
// Функция для создания метки
function createPlacemark (geoPoint, name) {
    // Создается метка у которой нет балуна
    var placemark = new YMaps.Placemark(geoPoint, {hasBalloon: 0});
    placemark.name = name;
   
    // Навешиваем обработчик на щелчок
    YMaps.Events.observe(placemark, placemark.Events.Click, listener);
    return placemark;
}

Для всех меток навешивается один и тот же обработчик:
// Обработчик щелчка по метке
function listener (obj) {
    document.getElementById("address").innerHTML = obj.name;
}

Прошу прощения. Кут чето не заметил. Саша Белый, огромное Вам спасибо. Все заработало, что меня сильно порадовало.

Вот собственно все в сборе. Может кому поможет также.

 

Вот как это сделать в штмл и сразу за ним скрипт ява. Може придет нубс похлеще меня :)