Question

我试图根据数组中对象的坐标将开放层地图居中。我创建了一个简单的函数，将地图放在带有ul元素的li列表的悬停中。

现在，该函数可以完美地在彼此靠近的坐标上正常工作，但是，当坐标彼此相距较远时，当地图移位时，它不会自动居中，而是完全移开从原本应该的地方

但是，当我将鼠标悬停在功能彼此接近的其他li元素上时，它又开始完全正常工作。有人对为什么此位移发生在彼此远离的坐标上有任何想法吗？

我只是试图将地图居中。让我向您展示我的代码。

这是我的HTML：

<ul class="content-full" id="poi-cat-id">
  <li class="get-id" data-id="1">
    <div class="event-desc">
      <p>Name 1</p>
    </div>
  </li>
  <li class="get-id" data-id="2">
    <div class="event-desc">
      <p>Name 2</p>
    </div>
  </li>
  <li class="get-id" data-id="3">
    <div class="event-desc">
      <p>Name 3</p>
    </div>
  </li>
  <li class="get-id" data-id="4">
    <div class="event-desc">
      <p>Name 4</p>
    </div>
  </li>
  ... 
  ...
</ul>

现在这是我的JavaScript：

var values = [{
    id: 1,
    adresa: "adress 1",
    name: "Name 1",
    description: "Description",
    latitude: 41.3353,
    longitude: 19.8174
  },
  {
    id: 2,
    adresa: "adress 2",
    name: "Name 2",
    description: null,
    latitude: 41.357509,
    longitude: 19.775016
  },
  {
    id: 3,
    adresa: "adress 3",
    name: "Name 3",
    description: null,
    latitude: 41.339129,
    longitude: 19.875258
  },
  {
    id: 4,
    adresa: "adress 4",
    name: "Name 4",
    description: null,
    latitude: 41.357988,
    longitude: 19.761444
  }
];

function mauseEnter() {
  $('.get-id').on('mouseenter', function(evt) {
    var el = $(this);
    id = el.data('id');
    var result = values.find(x => x.id === id);
    fid = values.findIndex(x => x.id === id);
    var bounceAndZoom = function(location, factor, reset) {
      //map.getView().setZoom(13);
      map.getView().setResolution(factor);
      map.getView().setCenter(location);
    }

    var showPopUp = function(coordinates, title, content) {
      overlay.setPosition(coordinates);
      setTimeout(function() {
        content1.innerHTML = '<div class="marker-html"><img class="marker-img-full" src="../' + result.imageUrl + '" alt=""><h1>' + result.name + '</h1></div>';
      }, 1);
    }

    var dip = function(post) {
      var center = ol.proj.transform([result.longitude, result.latitude], 'EPSG:4326', 'EPSG:3857');
      console.log(result.longitude, result.latitude);
      bounceAndZoom(center, 40, false);
      showPopUp(center, result.emer, result.adresa);
    }
    dip();
  });

};

function mauseLeave() {
  $('.get-id').on('mouseleave', function() {
    var el = $(this);
    id = el.data('id');
    var result = values.find(x => x.id === id);
    fid = values.findIndex(x => x.id === id);

    overlay.setPosition(undefined);
    closer.blur();
    return false;
  });
};

mauseLeave();
mauseEnter();

现在，如果我将鼠标悬停在第二个对象上的第一个对象上，它将移动的地图。但是，当我将鼠标悬停在第三个对象的第二个对象上时，它会按原样重新定位，这意味着一切都会按其应有的方式进行。知道为什么会这样吗？这是常见情况吗？

任何有关如何解决我的问题的帮助将不胜感激。谢谢：）

元素悬停时的中心地图（开放层4.6）无法正常工作

0 个答案: