首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
showPosition()获取用户经度纬度
function showPosition(position){
console.log(position);
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
console.log(‘纬度:‘+lat+‘,经度:‘+lag);
}
执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧!!!
补充showError(),这个函数是报错信息
showError(error){
console.log(error.code)
}
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
接下来用百度和谷歌提供的接口,利用获取到的经纬度查看具体的地址信息,用到了jq的ajax封装,所以得引用jq。
function showPosition(position){
//将我们获取到的经纬度保存到变量中
var latlon = position.coords.latitude+‘,‘+position.coords.longitude;
//baidu接口
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu").html(‘正在定位...‘);
},
success: function (data) {
if(data.status==0){
$("#baidu").html(data.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu").html(latlon+"地址位置获取失败");
}
});
});
谷歌同上,接口如下;
var url=‘http://maps.google.cn/maps/api/geocode/json?latlng=‘+latlon+‘&language=CN‘;
//成功回调:
success: function (data) {
if(data.status==‘OK‘){
var results = data.results;
$.each(results,function(index,array){
if(index==0){
$("#google_geo").html(array[‘formatted_address‘]);
}
});
}
}
最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部;使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式;
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩。你可以使用position:absolute样式来定义对话框,但是position:relative的元素出现的位置决定了对话框在页面中的绝对位置。
需求:点击跳转到页面指定位置.利用a标签的锚点跳转。1、利用a标签的锚点跳转,2、用js的scrollIntoView方法,3、获取id为test的元素距离父元素顶部的位置,即offsetTop, 改变父元素的scrollTop
XPath是一种在XML文档中定位元素的语言。因为HTML可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。
网址必须为域名,不能用ip直接访问,否则手机浏览器直接拒绝改请求。iphone的浏览器(包括微信扫码进入网站) ,亲测调用 http 的网站是不能获取到经纬度的,是苹果手机安全的考虑,如果使用https网站的话
改变元素在页面中的位置:页面中元素的默认定位方式,默认文档流,从上往下,从左往右;当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。
一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识
浏览器的世界里本没有粘性定位事件。然而,网页开发中,元素若使用了粘性定位 position:sticky ,常常还需要一个粘性定位事件,比如,外卖菜单。
复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!