小编Sle*_*ely的帖子

我有一个带瓷砖的容器(草,水等),其中一些我有物品(边境精灵,树木和一般物品).由于精灵的性质,所有项目都是64x64,而瓷砖只有32x32.

我的问题是我想在磁贴上触发悬停事件,但它们有时会被另一个磁贴的项目遮挡.

下图显示了问题.厚厚的绿色区域是我想要悬停树木时真正悬停的瓷砖.

问题http://upload.cip.nu/pfile.php?file_id=2327

CSS:

#map_canvas .tile{
    height: 32px;
    position: absolute;
    width: 32px;
}
#map_canvas .tile .item{
    background-position: bottom right;
    background-repeat: no-repeat;
    bottom: 0;
    display: inline-block;
    height: 64px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
}

HTML,简化:

<div class="tile" style="background-image: url(grass.png);"></div>
<div class="tile" style="background-image: url(grass.png);"></div>
<div class="tile" style="background-image: url(grass.png);">
    <div class="item" style="background-image(top-left-border.png);"></div>
</div>

这是现场演示http://sleavely.com/tiles/

我甚至不知道如何表达这个问题,但是这里有:

是否有可能只触发父元素(.tile)上的事件,以便溢出的子元素(.item)不会混淆我真正悬停的哪个图块？

编辑:感谢@Brilliand我实现了以下内容

function figureOutTile(e){
    var $source = jQuery(e.srcElement);
    if($source.hasClass("item")){
        var $parent = $source.parent();
        var posx = $parent.attr("col");
        var posy = $parent.attr("row"); …

我的问题类似于“谷歌地图中两个近点之间的曲线”，但我想将地图生成为静态图像服务器端（PHP 或 NodeJS），以便它可以在离线环境中使用。

简而言之，我有两组纬度和经度，我想在上面放置标记并在其间绘制非测地线弧，然后将地图保存为图像。谷歌地图不是必需的。

这基本上是我想要实现的目标：