javascript 获取地图区域的位置（html）？

Get position of map area(html)?

提问by switz

Is this possible? I'm trying to find the x and y coordinates of the element in relation to the browser.

这可能吗？我试图找到与浏览器相关的元素的 x 和 y 坐标。

var position = $(this).position();
    x = position.left;
    y = position.right;

Doesn't work.

不起作用。

Is there any way to do this?

有没有办法做到这一点？

http://adamsaewitz.com/housing/
highlight the blue room 070

http://adamsaewitz.com/housing/
突出蓝色房间070

回答by Gabriele Petrioli

The problem lies in the fact that you are accessing the top/left of an area element.

问题在于您正在访问区域元素的顶部/左侧。

The area element is not positioned where its coords say. This is handled behind the scenes by the dom/browser.

区域元素未定位在其坐标所指的位置。这是由 dom/浏览器在幕后处理的。

So you need to find the image that the arearelates to and grab its offset.

因此，您需要找到与 相关的图像area并获取其偏移量。

var imgId = $(this).closest('map').attr('name');
var imgPos = $('#' + imgId).offset();

Then, you grab the coordsattribute of the areaand split it to get left/top/widthand use those to pinpoint the location inside the image.

然后，你抢coords的属性area，并把它分解得到left/ top/width和使用这些精确定位图像内的位置。

var coords = $(this).attr('coords').split(',');
var box = {
            left: parseInt(coords[0],10),
            top: parseInt(coords[1],10),
            width:  parseInt(coords[2],10)-parseInt(coords[0],10),
            height:  parseInt(coords[3],10)-parseInt(coords[1],10)
            };

Take into consideration the width/height of the info box that appears (and since you animate it, take that into consideration as well) and you get to

考虑出现的信息框的宽度/高度（并且由于您对其进行了动画处理，因此也要考虑到这一点），然后您就可以

x = imgPos.left + box.left + box.width/2 - 65; // 65 is the info width/2
y = imgPos.top + box.top -20 -160 -1; // 20 is the animation, 160 is the info height, 1 is a safe distance from the top

demo: http://www.jsfiddle.net/XBjwN/

演示：http: //www.jsfiddle.net/XBjwN/

回答by Nick Craver

Edit for updated question:Since you're using <area>it's a different story, and fetching from the coordsattribute is much easier, like this:

编辑更新的问题：由于您使用<area>的是不同的故事，因此从coords属性中获取要容易得多，如下所示：

var position = $(this).attr('coords').split(',');
x = +position[0] - 50;
y = +position[1] - 170;

The offsets are just to account for the hard-coded width/height of the tooltip itself. In addition to the above, you want to use topand leftrather than margin-topand margin-left. Also to account for the #content<div>'s position in the page, give it a relativeposition for the tooltip to sit in, like this:

偏移量只是为了说明工具提示本身的硬编​​码宽度/高度。除了上述之外，您还想使用topandleft而不是margin-topand margin-left。还要考虑#content<div>的在页面中的位置，给它一个relative工具提示所在的位置，如下所示：

#content { position: relative; }

Then...instead of .after(), use .append()so it gets added insidethat parent.

然后...而不是.after(), use.append()以便将其添加到该父级中。

You can test the result here.

您可以在此处测试结果。

---

---

For original question:
The object .position()returns has topand leftproperties...but you want .offset()here anyway (it's relative to the document, where .position()is relative to the offset parent), so it should look like this:

对于原始问题：
对象.position()返回 hastop和leftproperties...但.offset()无论如何你都想要这里（它是相对于document， where.position()是相对于offset parent 的），所以它应该是这样的：

var position = $(this).offset(),
    x = position.left,
    y = position.top; //not right!

Or this:

或这个：

var position = $(this).offset();
var x = position.left;
var y = position.top;

...but without a single varcomma-separated statement, or a varon each line, you're also creating (or trying to) global variables, which will blow up in IE.

...但是如果没有一个var逗号分隔的语句，或者var每行都没有 a ，你也在创建（或试图）全局变量，这将在 IE 中爆炸。

回答by Jomin George Paul

$(document).ready(function () {
            $('map').imageMapResize();
            $('area').hover(function () {
                $('.imgpopover').css({ "display": "block", "top": $(this).attr("coords").split(',')[1]+"px", "left": $(this).attr("coords").split(',')[0]+"px" })
                $('.imgpopover label').text($(this).attr("title"))
            }, )
        });