用js 获取一个div坐标的方法是什么?

JavaScript010

用js 获取一个div坐标的方法是什么?,第1张

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

手机js页面实现一键定位,并且把获取的地理位置显示到文本框中代码如下:

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

name: '北京市',

date: curDateTime()//获取当前时间方法

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

if (successFunc != undefined)

successFunc(addComp)

})

},

function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

if (errorFunc != undefined)

errorFunc(error)

}, { timeout: 5000, enableHighAccuracy: true })

} else {

alert("你的浏览器不支持获取地理位置信息。")

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。")

}

}

var showPosition = function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

})

}

var showPositionError = function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

}

一、PC端通过IP实现定位代码

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>

<script type="text/javascript">

document.write(IPData[0])   //显示IP地址

document.write(IPData[2])   //显示省

document.write(IPData[3])   //显示市

</script>

二、获取客户端地址代码

<script>

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>

获取key准备工作参考链接: https://lbs.amap.com/api/javascript-api/guide/abc/prepare

地图初始化加载的定位只能获取到城市级别信息,如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位,使用方式如下:

高德JS API提供的浏览器定位接口,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。

JS-API的Geolocation定位插件,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。其中与安卓定位sdk的结合使用适用于开发安卓系统的H5应用,需同时使用安卓定位sdk和JS-API。

(1)在PC端,因为原生接口成功率很低,JS-API会优先调用精确IP定位服务,在IP定位失败的时候,尝试使用浏览器原生定位接口进行定位,如果原生定位接口也定位失败,则返回error事件或回调error信息。定位成功之后我们会对浏览器定位的经纬度结果进行向高德坐标的转化,并对所有有效定位结果融合地址信息后返回complete事件或者回调complete信息。

(2)在移动端,如果开发者开启了sdk辅助定位,那么安卓手机上我们会优先尝试调用sdk的定位接口,失败之后优先调用浏览器原生定位接口进行定位,浏览器定位失败之后尝试进行精确IP定位,如果以上三种定位全部尝试失败则返回error事件或回调error信息,否则和PC端的一样,定位成功之后进行高德坐标转化和地址融合。

(3)我们在定位的回调或者事件响应中返回了message字段,message字段明确指出了每一步的成功和失败原因。

可以通过如下方法获取定位失败信息,之后根据定位错误信息参考

(1)Get ipLocation failed:IP精确定位失败,精确IP定位服务目前无法完全覆盖所有用户IP,失败率在5%左右;

(2)sdk定位失败:请检查sdk的key是否设置好,以及webview的定位权限及应用和系统的定位权限是否开启。

(3)浏览器定位失败,有多种情况:

注释:如果定位到城市即可满足需求,建议大家改用Geolocation.getCityInfo方法,可以根据IP返回用户所在城市的基本信息,包括省、市名称、adcode、citycode、城市中心点,城市矩形边界等信息。