在地图和列表上显示位置

Question

我在数据库表中插入了一些坐标和一些关于它们的数据。我想在列表中显示信息并将位置显示为地图上的标记。

如何将列表项与地图上的相应标记相关联。就像当我将鼠标悬停在列表中的一行上时，在地图上显示该项目位置的标记会反弹或改变颜色，反之亦然；我的意思是将鼠标悬停在标记上，突出显示描述该标记的行。

我想到了类似Homestay 的搜索结果

目前我正在使用同步融合地图和中继器来生成列表，但如果你能建议我一个更好的选择，我可以改变它

Answer 1

我不熟悉同步融合，但从概念上讲，我认为您想要做的是在标记和列表项之间创建关系。

这是一个非常通用的解决方案，您可以（希望）对其进行修改以适应您正在做的事情：

const locations = Array.from(document.querySelectorAll('.map-location'));

/**
 * Gets the location ID from the DOM element's data-location-id
 * this is how we have chosen to associate markers with details
 */
function getElemLocationID(elem) {
  return elem.getAttribute('data-location-id');
}

/**
 * Returns an array containing a marker and details element,
 * based on their shared locationID
 */
function getLocationElementsFromID(locationID, locations) {
  const linkedLocationElements = locations.filter((location) => {
    let compareID = getElemLocationID(location);
    return compareID === locationID;
  });

  return linkedLocationElements;
}

function handleMouseOver(elements) {
  elements.map((elem) => elem.classList.add('highlighted'));
}

function handleMouseOut(elements) {
  elements.map((elem) => elem.classList.remove('highlighted'));
}

/**
 * Sets up the mouse events on the map-location elements
 */
function linkListToMarkers(locations) {
  locations.map((location) => {
    location.addEventListener('mouseover', (e) => {
      const locationID = getElemLocationID(e.currentTarget);
      const locationElements = getLocationElementsFromID(locationID, locations);
      handleMouseOver(locationElements);
    });
    location.addEventListener('mouseout', (e) => {
      const locationID = getElemLocationID(e.currentTarget);
      const locationElements = getLocationElementsFromID(locationID, locations);
      handleMouseOut(locationElements);
    });
  });
}

linkListToMarkers(locations);

.marker {
  display: inline-block;
  border: 3px solid #cccccc;
}

.marker.highlighted {
  border: 3px solid magenta;
}

.details {
  cursor: pointer;
  margin: 0 0 8px;
}

.details.highlighted {
  color: magenta;
}

<img src="http://i.stack.imgur.com/rU427.png" data-location-id="location-1" class="map-location marker" />
<img src="http://i.stack.imgur.com/rU427.png" data-location-id="location-2" class="map-location marker" />
<img src="http://i.stack.imgur.com/rU427.png" data-location-id="location-3" class="map-location marker" />
<img src="http://i.stack.imgur.com/rU427.png" data-location-id="location-4" class="map-location marker" />

<ul>
  <li data-location-id="location-1" class="map-location details">Location 1</li>
  <li data-location-id="location-2" class="map-location details">Location 2</li>
  <li data-location-id="location-3" class="map-location details">Location 3</li>
  <li data-location-id="location-4" class="map-location details">Location 4</li>
</ul>