主页 / user-220737

Vlad T.'s questions

Martin Hope
Vlad T.
Asked: 2020-04-20 02:10:20 +0800 CST
  • -1

在表格中，我使用了示例中的地图，它显示了所选城市中的点。地图在选择城市时通过该方法初始化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