JS要怎么改变浏览器缩放后DIV定位的位置?

JavaScript011

JS要怎么改变浏览器缩放后DIV定位的位置?,第1张

div的位置可以直接用offsetLeft或者offsetTop属性获取。窗口缩放可以用window.onresize捕获,代码例:

window.onresize=function(){

var xdiv=document.getElementById("a")

var lef=xdiv.offsetLeft

var top=xdiv.offsetTop

alert(lef+","+top)

}

在浏览器中调试JS代码的方法

Chrome浏览器

按F12或是"设置"--》“工具”--》“开发者工具”,即可打开chrome的调试工具。

关于这个工具的用法,请参考“怎么使用chrome调试工具”。这里主要讲怎么使用source这个选项来调试JS代码。下图source选项的窗口。

0怎么使用chrome调试工具

下图中1为source选项卡,2是在小窗口中选中source选项,3是当前页面的原代码,这个需要自己确定,一般会是index或是比较具体的jsp的名称。双击3中的页面,右边的窗口中会出现页面的原代码,如下图4. 点击5,会格式化代码,是代码有合理换行,比较清晰。

下面就是具体的调试了。

在下图1中,先通过元素定位找到一个按钮,查看原代码,找到它点击后的JS方法,然后在source窗口查询,如图2中的1,定位到该方法,在方法的第一行代码的左边,单击,窗口上会出现3这样的箭头,表示断点设置在这里。4是一些控制,包括继续执行,暂停执行,跳入,跳出等。5显示的是当前所有的断点的信息。

在页面上点击按钮,页面会进入下图所示的状态,表示进入JS方法中的断点了。代码执行会停在断点处。1上面的继续按钮,可以是JS方法继续执行,也可以使用3上面的继续按钮。代码停在2中的代码行,这时可以将鼠标悬停在变量上来查看变量值,也可以在console中打印输出。点击3上的执行下一行可以执行下一行,也可以跳入某个方法或是跳出。点击继续,代码会跳到下一个断点或是完成调试。

FireFox浏览器。

按F12或是“设置”--》"开发者"--》“Web控制台”

FireFox和chrome的调试方法是一样的,只是浏览器的调试窗口和按钮位置有少许区别,请参照chrome浏览器的调试方法就可以。下面是FireFox的调试窗口截图。

获取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、城市中心点,城市矩形边界等信息。