主页 / 问题 / 1069490
Accepted
Руслан
Asked:2020-01-14 02:24:45 +0000 UTC2020-01-14 02:24:45 +0000 UTC

如何通过单击按钮更改 Yandex 地图的中心？

  • 772

有一个 id="map" 的 Yandex 地图<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 数组键，并将此键替换为myMap 类中的中心属性（中心：arrLatLng[i]）看起来像这样：function init(){ var myMap = new ymaps.Map("map", { center: arrLatLng[i], zoom: 17 }); }如果您手动更改变量 i 的值，则地图上的中心会更改。我必须说他们帮助我解决了同样的问题，但它是在谷歌地图上，这里是链接如何通过点击谷歌地图 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 个回答

  1. Best Answer

    你可以这样尝试：

    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>

    • 0

相关问题