Получить новую позицию маркера карты при использовании перекрывающего маркера Spiderfier - PullRequest
Новая
       29

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

1 голос
/ 17 апреля 2019

У меня есть карта 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?

1 Ответ

1 голос
/ 17 апреля 2019

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

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

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

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

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

...