如何用JS 获取DIV的坐标位置?

JavaScript08

如何用JS 获取DIV的坐标位置?,第1张

div事先在输入框的下面的而且是隐藏的,当点击表情图标,div通过onclick激活JS某个函数,该函数内必须会有一段使隐藏的div显示出来的方法语句,是通过这样个流程实现的。

怎样去定位这个表情DIV的位置的,这个css里面有一个叫position的方法,利用坐标x,y实现div位置任意改变。

把div设置成相对定位或绝对定位,总之是让其拥有left,top值,当鼠标移进div的时候获取鼠标的坐标,用鼠标的left减去div的left值就是鼠标在div里面的left值,即鼠标在div中的x坐标,

同理,用鼠标的top值减去div的top值就是鼠标在div里面的top值,即鼠标在div中的y坐标。

表格中每一行数据均对应地图上一个坐标点,要求:

1、在表格中选中一行时,在地图上对应坐标点被同步点亮,以区别其他坐标点

2、点击地图上坐标点时,在表格中对应数据行被同步选中,以区别表格中其他数据行。

3、地图上多个坐标点重合时,被点亮坐标点自动显示在最顶层;点击此重合坐标点,等同于点击该重合坐标点中最顶层的那一个坐标点。

1、下图为点标记方式下的需求示意图:

说明:点亮就是上图中选中对应行数据的点标记颜色变为红色。

2、下图为点聚合方式下的需求示意图:

说明:上图中有表格有8行数据,对应地图上8个坐标点,其中有3个坐标点是重合的。

解决以上需求,可选择的方案有两个:

所谓点标记Marker,就是在地图上指定的一个坐标上打上一个Marker(如显示一个水滴图形,或者自定义的其他任何图形式),一个地图上可以定义很多个Marker。

这种方式的优点:可以清晰区分每个点,数据行和点标记之间可以联动。

这种方式的缺点:如果几个坐标相互之间非常近,导致点标记Marker重叠,很难识别重叠了几个坐标点,分别是哪几个点。

所谓点聚合MarkerCluster就是,在地图缩小的一定比例时,预定距离内的点会自动合并成一个点显示【上图中有3数字的点就是一个聚合点,说明有3个坐标合并的,并通过地图提供的方法可以获取到这个3个坐标的清单】。点聚合本质上是若干个点的集合,可以随时往其中增、减点,但无法针对其中的特定一个点进行个性化(如点亮)。

【注意,JSAPI1.0版本下点聚合不好用,2.0版本就能正常使用了】

这种方式的优点:地图上可以清晰看出哪些是单独点?哪些是聚合点?每个聚合点聚合了多少个坐标?

这种方式的缺点:在地图上无法点亮任意指定的一个坐标点(这个坐标点可能是一个单独的坐标点,也可能是一个聚合点中的某一个坐标点)

    通过分析以上可选择的方案,发现两个方案都不能完全满足需求:Marker方式难以取到重合点的点清单;MarkerColuster方式难以点亮指定一个坐标点。【此事古难全,对于完美主义者来说,这种扬弃性质的选择最是痛苦】

    最终笔者选择了Marker的方案,思路如下:

  1、点亮标记,表格选中行的同时,对应坐标点的图标变为红色

   2、标记置顶,点亮的标记通过setzIndex置顶(对于单独点没有意义,但对于重合点,就有价值了)

   3、关闭点亮,将上一个选中的点置暗,即恢复正常,不再处于点亮状态。

    对于重合点,在地图上的无法选中指定一个点,也无法显示点清单,更无法显示重合点内包含的点数量。但是可以通过表格选中某一行的方式,点亮地图上的对应坐标点,并将该坐标点置顶,以便于在地图上可以选中该点(选中的目的是方便后续逻辑,如通过弹出信息窗方式显示该点的详细信息)。

  如果有通过MarkerCluster能够解决以上需求的方法,欢迎各位可以在留言区探讨。

js获取DIV的位置坐标的方法大概有两种:

第一种:编辑代码:var odiv=document.getElementById('divid')

alert(odiv.getBoundingClientRect().left)

alert(odiv.getBoundingClientRect().top)

第二种:编辑代码function CPos(x, y) {this.x = x this.y = y} /*** 得到对象的相对浏览器的坐标*/ function GetObjPos(ATarget {var target = ATargetvar pos = new CPos(target.offsetLeft, target.offsetTop)var target =target.offsetParentwhile (target  pos.x += target.offsetLeft  pos.y += target.offsetTop target = target.offsetParent }return pos }var obj =  document.getElementById('divid') alert(GetObjPos(obj)['x'])//x坐标alert(GetObjPos(obj)['y'])//y坐标

SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN