Question

我在一张大地图上有兴趣点。

我想要的是在文本页面上有一个按钮，当单击该按钮时，它将在另一个窗口中打开地图图像。然后，我需要的是图像仅显示带有按钮的地图的相关部分，该部分显示了原始页面上提到的兴趣点。

我已经找到了使用和坐标，或者将地图用作精灵表，或者使用CSS背景位置来显示地图某一部分的方法，但是我无法找到一种方法来点击按钮。

理想情况下，我想仅用CSS来实现此目的，因为将有很多页面链接到该图像。

这里是我要实现的目标的小指南。

    <style>

.map-one {
  background: url('map.jpg');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

</style>

<button><a class="map-one" href="map.jpg">Click</a></button>

这是我尝试过的一些代码的范例，这显然是错误的，但是当单击链接时，我不知道如何将css样式应用于图像。

Answer 1

嗯，它不仅仅适用于纯CSS，您必须将一些参数传递给新窗口。因此，我假设您将X和Y坐标传递到新窗口，并且在新页面上有该坐标。

首先，您需要包装“地图”以为其提供视口。如果页面上没有其他内容，理论上您可以使用body：

<div id="mapviewport">
<div id="map">
</div>
</div>

因此，如果您希望用户能够浏览地图，则可以在视口上使用overflow: auto，否则使用overflow: hidden。地图容器获取地图的宽度/高度。该地图是通过地图容器上的background-image提供的。

现在要滚动到正确的位置，请使用mapViewport上的。scrollTop和.scrollLeft将地图滚动到正确的位置。

Answer 2

您将需要校准值，直到达到所需的确切区域为止，但是代码非常像这样：

主页

<a href="map.html" target="_blank"><button> <!-- Map page path -->
    CLICK ME!
</button></a>

地图页面

<style>
    div.map {
        background-image: url('map.png'); /* image file path */
        background-position: 70px 90px;   /* image position  */
        width: 200px;                     /* image size      */
        height: 200px;
    }
</style>
<div class="map"></div>

如何单击打开图像的链接，然后仅显示该图像的一部分

2 个答案:

主页

地图页面