主页 / 问题 / 1112728
Accepted
Vlad T.
Asked:2020-04-20 02:10:20 +0000 UTC2020-04-20 02:10:20 +0000 UTC

如何重新渲染 Yandex.Map (ObjectManager)？

  • 772

在表格中，我使用了示例中的地图，它显示了所选城市中的点。地图在选择城市时通过该方法初始化ymaps.ready(initYmaps)，初始正常显示。但是，如果您更改城市，则会发生重新初始化，并为新城市再次“绘制”地图，之后页面上会出现第二张地图。

我怀疑在重新初始化之前，您需要删除以前的卡。怎么做？或者对于这种情况有另一种方法吗？

已编辑

重现行为的最少代码（没有 apikey）：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Оптимальное добавление множества меток</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU&apikey=API_KEY" type="text/javascript"></script>
    <script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
    <script src="object_manager.js" type="text/javascript" defer></script>
  </head>
  <body>
    <main>
      <select id="citySelect" class="form-control">
        <option>-- Выберите город --</option>
        <option value="1">Москва</option>
        <option value="2">Тоже Москва</option>
      </select>
      <div id="map" style="height: 500px;"></div>
    </main>
    <script>
      $("#citySelect").on("change", function (e) {
        ymaps.ready(init);
      });
    </script>
  </body>
</html>

object_manager.js

function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: true
        });

    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set('preset', 'islands#greenDotIcon');
    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
    myMap.geoObjects.add(objectManager);

    $.ajax({
        url: "http://localhost:5000/data.json"
    }).done(function(data) {
        objectManager.add(data);
    });

}
yandex-maps-api

1 个回答

  1. Best Answer

    不要重新创建地图和 ObjectManager，只需更改它们的中心和位置。最好将地图的创建和信息的更新分开（第一印象=创建+更新）。

    var map = null;
var om = null;
ymaps.ready(function () {
  map = new ymaps.Map(...);
  om = new ymaps.ObjectManager(...);
  om.objects.options.set(...);
  om.clusters.options.set(...);
  map.getObjects.add(om);
  update();
});

$('#citySelect').on('change', update);

function update() {
  if (!map) return;
  var value = $('#citySelect').val();
  map.setCenter(...);
  map.setZoom(...);
  om.removeAll();
  // тут можно добавить отмену предыдущего запроса
  $.ajax(...).done(function (data) {
    if ($('#citySelect').val() === value) {
      om.objects.add(data);
    } else {
      // пока ждали ответ от сервера, пользователь уже выбрал другой город
      // можно проигнорировать, можно сохранить на будущее
      // просто показать их на карте нельзя: пользователь увидит
      // не выбранные город, а тот для которого данные пришли последними
      // (ну то есть технически можно, но это вряд ли желаемое поведение)
    }
  })
}
    • 1

相关问题