S
S
Sergey2015-06-30 23:45:40
JavaScript
Sergey, 2015-06-30 23:45:40

How to remove an element from Yandex.maps?

Good afternoon!
The site has a Yandex.map implemented by the following method:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function(){
        moscow_map = new ymaps.Map("banner_map", {
            center: [56.34820425, 41.30735193],
            zoom: 17
        });
var myPlacemark = new ymaps.Placemark([56.34820425, 41.30735193], {}, {
        iconLayout: 'default#image',
        iconImageHref: '/images/map_mark.png',
        iconImageSize: [48, 64],
        iconImageOffset: [-24, -64]
    });

moscow_map.geoObjects.add(myPlacemark);
    });
</script>

Accordingly, it has all the standard controls:
search, zoom, layers, traffic jams, etc. I found such a removeControl() thing in the documentation, but I don’t understand how to use
it . I would be grateful for help.

Answer the question

In order to leave comments, you need to log in

5 answer(s)
F
forgotten, 2015-07-01
@x__miller_x

I take it out from the comments:
There is no removeControl in the documentation;)
In general, controls are removed via map.controls.remove('searchControl').
But in your case, as far as I understand, it is enough to set the list of necessary controls directly in the map constructor.
https://tech.yandex.ru/maps/jsbox/2.1/customSet_co...
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/ref...
Although I don't really understand why remove the standard controls.

T
trefferr, 2016-03-08
@trefferr

In the initialization of the map constructor, you assign an empty array to the property.
controls: []

ymaps.ready(function(){
        moscow_map = new ymaps.Map("banner_map", {
            center: [56.34820425, 41.30735193],
            controls: [],
            zoom: 17
        });

D
Dmitry Antonov, 2015-07-01
@Sadist07

To be honest, it's strange when at the moment there should not be any elements at all .... Except for the one you created var myPlacemark = new ymaps.Placemark([56.34820425, 41.30735193]............. ..........
and added moscow_map.geoObjects.add(myPlacemark);
In general, try to remake the map call by analogy....

<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>

True, you need the current upper part until the labels are grouped.

R
Rikcon, 2015-06-30
@Rikcon

moscow_map.removeControl(YMaps.Zoom());
try it, I don't remember exactly how it works.
UPD
If it doesn't work then try again

var zoomControl = new YMaps.Zoom();
moscow_map.removeControl(zoomControl);

N
Nikita, 2015-07-01
@Rema1ns

If you mean to remove the placemark, then you need to add elements to your collection
, create your own collection - myCollection = new ymaps.GeoObjectCollection();
create a placemark - placemark[id] = new ymaps.Placemark
add a placemark to the collection - myCollection.add(placemark[id]);
remove all myCollection.removeAll(); or remove a specific

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question