retrofit 解析百度地图api 返回数据_一线互联网企业web前端项目-百度地图api

这篇文章是我推荐给大家有想法学习前端开发的朋友,或者是已经开始学习web前端的小伙伴,之前就有很多的朋友跟我说,学习编程学习前端的时候总是摸不到头脑,不知道应该去哪里找项目,今天就和大家分享一下我自己之前模仿的百度地图api做的一个小项目,也希望可以给再学习的小伙伴一起学习进步。

百度地图使用

1.1 注册

百度地图:掌握当前的位置在网页显示位置,插入地图 拖拽,点击事件。

应用场景:网页插入百度地图

690a32ce785f81f8416b0b016e02bf60.png

注意:定位 距离 公交 不关心。

官网:http://lbsyun.baidu.com/

8fd5da5e90fcd0c9d1c92ed70c16b9e6.png
cf1ee42f41b3dc2a12922979ed78d30f.png
80a3e5bfe2800a164fa27c1274427e96.png
be87448e922442f13ac31c22c96cdd1c.png

1.2 获取账号和密钥

1. 注册百度账号

2. 申请成为百度开发者

3. 获取密钥

43fd7f637f8ecac3aeb920a772f1fd70.png

提交

e0ef4d40a90470c2037ff3ecf2bdb5f1.png

密钥:oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi

再次查看密钥:

15c0d667064987dfd86ee8b6d5308114.png

1.3 插入地图

1. 创建地图容器元素 设置大小

2. 引用百度地图API文件

3. 创建地图实例

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915); 
map.centerAndZoom(point, 15);  
dffbb16e6953600ccb5b8523785cc619.png

第2节 控件和标记

2.1 添加控件

效果:

f57c3626f949961e71e4514f692b59e3.png

api位置

35cc23f523b44925d9bc4e96878d1f2f.png

【代码】

9290be8f64ee4f6f181a24c3a5633e01.png

2.2 标注

ceaf5f74bfad78d8599f22ad8dd00ad5.png
115d3577d4e4dd9d4e6e3fea7ff963dc.png

2.3 信息窗口

效果:

1ae8fc430c262090c230b873248565d9.png
2bddc92aa97099b9d3d65cf36d4f080a.png
9c076dfff45dd783ed651020d9c08e5d.png

2.4 地址解析

f09484e73c96d39c483c0a8d2dca037a.png
3d3c057ff478a25ab8d4f9c7fe983c2b.png

360同城帮

3.1 数据地址:

热门城市:http://bang.360.cn/aj/getcitycode

说明:1.使用代理请求

2.返回的是一个json数据, 城市名称在 name属性上 城市的code/id 在code属性上

区域请求地址:http://bang.360.cn/aj/get_area/?citycode=bei_jing

说明:1.请求方式 jsonp

2.citycode 对应选中的热门城市

3.返回值是json,结果在result属性中,区域的名称是result对象中的属性值,区域的id是 对象中的键名

店铺请求地址:

http://bang.360.cn/at/shop?&quan_id=&service_id=&type_id=&online=off&cuxiao=off&is_bzj=0&tag=&pagesize=5&lng=&lat=&city_id=bei_jing&area_id=6&pn=1

说明:1.请求方式是代理请求

2.city_id 是选中的热门城市id

area_id 是选中的区域,可以为空

pn 是页码值

3.返回值:

shop_name: 店铺名称

addr: 店铺地址

main: 主营

map_longitude:经度

map_latitude:维度

3.2 效果图

5549f99fe6fe0a976a552b78fbcf6f24.png

3.3 一级热门城市获取

先获取一级下拉的内容区域 ,请求我们的接口内容 会产生跨域 ,我们采用后台php代理访问接口,我们本地访问php这个接口

【代码演示】

223566e7b5efd131e9a71703679e25ac.png

【代码】

6e121069b2b893356dfc991898cb646d.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值