今年的项目开发中,初步接触了移动端WEB开发,也就边学习HTML5边开发,主要使用了JQuery Mobile技术,发现这个不适合做互联网产品,大部分样式都需要重写,只用了部分功能。手机端WEB开发过程中第一次接触了定位功能,通过各大搜索引擎发现手机端定位都是通过浏览器的定位,而用在PC端浏览器第一次会弹出提示“是否开启定位功能”,Boss看到这个提示,却觉得对用户的体验效果不好,不好那我换一种方式实现不就好了,这又不是多大的事,而Boss的脸色就大变,就说:不应该有这样的体验。我们这样做不都是为了赶时间,能够尽快将新功能发布嘛。
1.手机WEB定位方法:
复制代码 代码如下:
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: '/' });
};
前提要引入百度API:<script src="/UploadFiles/2021-04-02/api">
2.PC端通过IP实现方法:
采用腾讯提供的接口,这个目前已经不能使用了
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/ipaddress">
<script type="text/javascript">
document.write(IPData[0]); //显示IP地址
document.write(IPData[2]); //显示省
document.write(IPData[3]); //显示市
</script>
采用新浪接口: http://int.dpool.sina.com.cn/iplookup/iplookup.php"http://int.dpool.sina.com.cn/iplookup/iplookup.php">http://int.dpool.sina.com.cn/iplookup/iplookup.php"codetitle">复制代码 代码如下:
<script type="text/javascript">
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php"http://www.youdao.com/smartresult-xml/search.s">http://www.youdao.com/smartresult-xml/search.s"codetitle">复制代码 代码如下:
<script>
var ip = "124.127.108.133";
var url = "http://ip.taobao.com/service/getIpInfo.php" + ip;
$.getJSON(url, function (json) {
var myprovince2 = json.data.area;
var mycity2 = json.data.region;
alert("您所在的城市是:" + myprovince2 + mycity2);
});
</script>
太平洋IP地址库API接口
http://whois.pconline.com.cn/"http://pv.sohu.com/cityjson">http://pv.sohu.com/cityjson
搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson"http://txt.go.sohu.com/ip/soip">http://txt.go.sohu.com/ip/soip
3.获取客户端IP方法
复制代码 代码如下:
<script>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
$.getJSON(url, function(data) {
alert(data.Ip);
});
</script>
今天就写到这吧,还有好多工作需要去完成,等有时间了可以试试其它接口。欢迎大家来拍砖,提供更好的方法。
JS,地理位置
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com