使用JS获取当前地理位置方法汇总(如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!!)

RefererNotAllowedMapError 错误
加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用站点列表中。请在 Google API Console 上检查您的 API 密钥的引用站点设置。

请参阅 Google API Console 中的 API 密钥。如需了解详细信息,请参阅 API 密钥安全使用最佳实践

如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!!

今年的项目开发中,初步接触了移动端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="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

  2.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>

  采用新浪接口: http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

  多地域测试方法:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=127.0.0.1

复制代码 代码如下:

<script type="text/javascript">

$.getScript(‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘, function(_result) {

if (remote_ip_info.ret == ‘1‘) {

alert(‘国家:‘ + remote_ip_info.country + ‘<BR>省:‘ +
remote_ip_info.province + ‘<BR>市:‘ + remote_ip_info.city +
‘<BR>区:‘ + remote_ip_info.district + ‘<BR>ISP:‘ +
remote_ip_info.isp + ‘<BR>类型:‘ + remote_ip_info.type +
‘<BR>其他:‘ + remote_ip_info.desc);

} else {

alert(‘没有找到匹配的IP地址信息!‘);

}

});

</script>

  网易有道IP地址接口(这个有待测试)

  http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP地址

淘宝请求接口(GET)

复制代码 代码如下:

<script>

var ip = "124.127.108.133";

var url = "http://ip.taobao.com/service/getIpInfo.php?ip=" + 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/?ip=[ip地址字符串]

  另外:还有google、搜狐等提供对应的接口,大家可以自己试一试。

  搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson

搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson?ie=utf-8

搜狐另外的IP地址查询接口: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>

  

  今天就写到这吧,还有好多工作需要去完成,等有时间了可以试试其它接口。欢迎大家来拍砖,提供更好的方法。

时间: 2024-10-10 07:04:25

使用JS获取当前地理位置方法汇总(如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!!)的相关文章

js获取元素样式方法

? 1 2 3 4 5 6 7 8 function getStyle(ojb,attr){       if(obj.currentStyle){             return obj.currentStyle[attr];       }         else{            return getComputedStyle(obj,false)[attr];        } } js获取元素样式方法,布布扣,bubuko.com

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 page

网页JS获取当前地理位置(省市区)

转载自:http://www.cnblogs.com/ZHF/p/4169634.html 1.手机WEB定位方法: var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"

&lt;js&gt;实现回车键登陆方法,并处理谷歌与火狐不兼容的问题

1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);"> 2.使用js相应登陆添加方法 //添加回车登陆事件 function keyLogin(e){ //处理火狐与谷歌不兼容此事件的触发方式 e = e ? e : window.event; var keyCode = e.which ? e.which : e.keyCode; //回车键的键值为13 if(keyCode == 13){ //调用登录按钮的登

5种处理js跨域问题方法汇总

1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误. JSON是一种

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

简介 关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持

胡博君浅谈Js获取当前时间方法集合

var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();    //获取完整的年份(4位,1970-????) myDate.getMonth();       //获取当前月份(0-11,0代表1月) myDate.getDate();        //获取当前日(1-31) myDate.getDay();         //获取当前星期X(0-6,0代表星期天) myDate

JS获取页面高度方法小结

/* document.body是为了兼容chrome浏览器 */ //获取到滚动条距可视页面顶部的位置 function getScrollTop(){ var scrollTop = 0; //经测试,在chrome和ff下,document.documentElement.scrollTop并没有什么卵用,都是一直返回0.但在IE下是好使的,可怜的IE. if(document.documentElement && document.documentElement.scrollTop