Получить новую позицию маркера карты при использовании Overlapping Marker Spiderfier

У меня есть карта Google с маркерами, которая использует OverlappingMarkerSpiderfier для распределения маркеров, которые очень близко перекрываются. Мне нужно получить положение маркеров на экране для событий мыши (в реальной версии я делаю всплывающие подсказки, которые слишком сложны, чтобы вклиниваться в стандартное значение, которое предлагает Google).

function project(latLng) {
  var TILE_SIZE = 256;
  var siny = Math.sin(latLng.lat * Math.PI / 180);

  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
      TILE_SIZE * (0.5 + latLng.lng / 360),
      TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
}

function getPixelPosition(marker, map) {
  var zoom = map.getZoom();
  var scale = 1 << zoom;
  var loc = marker.data.location;
  var worldCoordinate = project(loc);
  var pixelCoordinate = new google.maps.Point(
      Math.floor(worldCoordinate.x * scale),
      Math.floor(worldCoordinate.y * scale));

  return pixelCoordinate;
}

function getMapTopLeftPosition(map) {
  var zoom = map.getZoom();
  var scale = 1 << zoom;
  var topLeft = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng());
  var projection = map.getProjection();
  var topLeftWorldCoordinate = projection.fromLatLngToPoint(topLeft);
  var topLeftPixelCoordinate = new google.maps.Point(
          topLeftWorldCoordinate.x * scale,
          topLeftWorldCoordinate.y * scale);

  return topLeftPixelCoordinate;
}

function getMarkerRelativePosition(marker, map) {
  const screenPosition = getPixelPosition(marker, map);

  const topLeftMapPosition = getMapTopLeftPosition(map);

  const markerHeight = 60;
  const markerWidth = 48;
  return {
    x: screenPosition.x - topLeftMapPosition.x - (markerWidth / 2),
    y: screenPosition.y - topLeftMapPosition.y - markerHeight,
  };
}

function showInfo(position, text) {
  // triggered on marker mouseover
  const mapContainer = document.getElementById('map-container');
  const infoDiv = document.createElement('div');
  infoDiv.innerHTML = text;
  infoDiv.setAttribute('id', 'info')
  infoDiv.style.left = position.x + 'px';
  infoDiv.style.top = position.y + 'px';
  mapContainer.appendChild(infoDiv);
}

function hideInfo() {
  // triggered on marker mouseout
  const info = document.getElementById('info')
  info.remove();
}

Это работает так, как я хочу, для маркеров, которые не были распределены из кластера с помощью OMS. Однако, когда я щелкаю группу маркеров, чтобы распределить их, приведенный выше код по-прежнему возвращает исходное положение маркера. См. рабочий пример здесь: https://jsfiddle.net/ebbishop/s2mzgp0b/

Я подозреваю, что есть способ получить новое положение маркера с помощью библиотеки oms, но я не смог найти его в документации.

Как я могу получить новую позицию маркера или изменение координат x и y?


person ebbishop    schedule 17.04.2019    source источник


Ответы (1)


Проблема заключалась в функции getPixelPosition. Мы можем легко изменить эту строку

var loc = marker.data.location, в котором использовался пользовательский статический атрибут данных, установленный для других целей, и заменить его на

var loc = { lat: marker.getPosition().lat(), lng: marker.getPosition().lng() }, который получает текущую позицию маркера.

Все, что делает oms после кучи вычислений, — это обновляет положение маркера google maps, используя собственный метод setPosition gmaps, так что это работает просто отлично.

Обновленный рабочий пример

person ebbishop    schedule 17.04.2019