0

Имеется Яндекс карта с id="map"<div id="map" style="width: 99%; height: 500px" class="myMap"></div>и кнопка<button id="btnMap">кнопка </button>Задача такова: у агентства имеются три адресаvar myCenter0 = [59.893254, 30.331014]; var myCenter1 = [59.890658, 30.318321]; var myCenter2 = [59.894513, 30.320270];и нужно чтобы каждый раз нажав на кнопку с id="btnMap" первый адрес сменялся на второй, второй на третий, а третий на первый и так дале по циклу. Я для этого поместил все три адреса в массивlet arrLatLng = [myCenter0, myCenter1, myCenter2]; затем создал в переменную i где значение i равняется нулю и это значение я подставляют в ключ массива arrLatLng, а этот ключ я подставляю в значения свойства center в классе myMap (center: arrLatLng[i]) выглядит это так:function init(){ var myMap = new ymaps.Map("map", { center: arrLatLng[i], zoom: 17 }); } если в ручную менять значение переменной i, то на карте меняется центр. И должен сообщить что такую же задачу мне помогли решить, но это было на google карте, вот ссылка Как менять адреса по нажатию на одну кнопку на Google map api JavaScript? . Я пробовал решить по аналогии но не чего не выходит вот весь код ` ymaps.ready(init); var myCenter0 = [59.893254, 30.331014];//адрес № 1 var myCenter1 = [59.890658, 30.318321];//адрес № 2 var myCenter2 = [59.894513, 30.320270];//адрес № 3 let arrLatLng = [myCenter0, myCenter1, myCenter2];//массив из трех адресов (или как правильно центры)

  var i = 0; 

  $("#btnMap").click(function() {
    i = (i + 1) % arrLatLng.length;
    myMap.setCenter(arrLatLng[i]);

  });

  function init(){
    var myMap = new ymaps.Map("map", {
      center: arrLatLng[i],//вот в ключ массива подставляется значение переменной i таким образом менятся на карте центр 
      zoom: 17
  });

  }
</script>`
1
  • В моем вопросе почему то часть последнего фрагмента кода вставилась как текст, а остальное как положено 13 янв 2020 в 18:26

1 ответ 1

0

Можно попробовать вот так:

ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map("map", {
      center: [59.890658, 30.318321],
      zoom: 15
    }, {
      searchControlProvider: 'yandex#search'
    }),
    labels = [
      [59.893254, 30.331014],
      [59.890658, 30.318321],
      [59.894513, 30.320270]
    ],
    labelIndex = labels.length - 1;

  $("#btnCycle").click(function() {

    if (labelIndex < labels.length - 1) {
      labelIndex += 1
    } else {
      labelIndex = 0
    }
    myMap.setCenter(labels[labelIndex]);
    //    myMap.geoObjects.removeAll();
    //    myPlacemark = new ymaps.Placemark(labels[labelIndex] , {
    //                      balloonContent: labels[labelIndex],
    //                      hintContent: labels[labelIndex]
    //                    });
    //    myMap.geoObjects.add(myPlacemark);			
  });
}
<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <input id="btnCycle" type="button" value="Cycle" />
  <div id="map" style="width: 800px; height: 600px"></div>
</body>

</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.