js-web跨域实现百度地图普通ip定位

希望实现的功能：进入页面利用IP自动获取用户当前位置

使用工具：百度地图API—普通IP定位API·web服务API
普通IP定位API官网文档

使用百度IP定位功能，需要3步骤：

第一步，申请密钥（AK），作为访问服务的依据；
第二步，拼写发送HTTP/HTTPS请求的URL，注意需使用第一步申请的AK；
第三步，接收HTTP/HTTPS请求返回的数据（JSON格式）。

接口示例：

http://api.map.baidu.com/location/ip?ak=请输入您的AK&coor=bd09ll
或
https://api.map.baidu.com/location/ip?ak=请输入您的AK&coor=bd09ll

返回数据：

{  address: "CN|北京|北京|None|CHINANET|1|None",    #地址  content:    #详细内容  {  address: "北京市",    #简要地址  address_detail:    #详细地址信息  {  city: "北京市",    #城市  city_code: 131,    #百度城市代码  district: "",    #区县  province: "北京市",    #省份  street: "",    #街道  street_number: ""    #门址  },  point:    #当前城市中心点，注意当前坐标返回类型{  x: "116.39564504",  y: "39.92998578"  }  },  status: 0    #返回状态码
}

一开始使用ajax请求地址获取返回的定位信息，发现报错，原因是无法跨域。
然后各种问度娘，发现jsonp最好使。

//ip获取位置/*** http://api.map.baidu.com/location/ip?ak=你的密钥&coor=bd09ll*/var url = 'http://api.map.baidu.com/location/ip';var data = {ak: "你的密钥",coor: "bd09ll",callback: 'jsonpcallback'//对应值为自定义回调函数名};//组合urlvar buffer = [];for (var key in data) {buffer.push(key + '=' + encodeURIComponent(data[key]));}var fullpath = url + '?' + buffer.join('&');console.log(fullpath);CreateScript(fullpath);//生成scriptfunction CreateScript(src){var el = document.createElement('script');console.log(el);el.src = src;el.async = true;el.defer = true;document.body.appendChild(el);}//自定义回调函数，重点function jsonpcallback(rs) {// var rs = JSON.stringify(rs);var city = rs['content']['address_detail']['city'];city = city.toString().substr(0,city.length - 1);console.log(rs);//百度地图返回值//console.log(city);//城市名称，去掉最后的“市”//console.log(rs['content']['point']['x'],',',rs['content']['point']['y']);//坐标}

基本原理是，在页面添加一行script，利用get获取，这里务必要有callback才行

<script src="你的请求地址" async defer></script>

获取到的返回值：

Object {address: "CN|省份名|城市名|None|CHINANET|0|0", content: Object, status: 0}

js-web跨域实现百度地图普通ip定位相关推荐

根据百度地图进行IP定位获取地址
1,首先引入百度的api <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
百度地图---通过ip定位获取当前城市
实现的功能: 商户注册,有坐标这个字段,通过此功能,商户在地图上自行移动标注来获取经纬度坐标, 下边怎么使用,可自由发挥了. 效果图: 代码: <html><head>< ...
怎么更好掌握Web前端技术？JS的跨域是怎么回事？
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)
前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下,不在访问的时候直接加载,而是页面加载最后在脚本里面动态添加dom元素),虽说技术含量不怎么高,但是大家还 ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
js的跨域问题和解决办法
js的跨域问题和解决办法参考文章: (1)js的跨域问题和解决办法 (2)https://www.cnblogs.com/jsrou/p/9896451.html 备忘一下.
web跨域问题解决方案
web跨域问题解决方案参考文章: (1)web跨域问题解决方案 (2)https://www.cnblogs.com/Fanzifeng/p/7117493.html 备忘一下.
后端传输流跨域_Java开发中解决Js的跨域问题过程解析
这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下主流方法有JSONP和CORS两种,这里记 ...

js-web跨域实现百度地图普通ip定位

js-web跨域实现百度地图普通ip定位相关推荐

最新文章

热门文章