retrofit 解析百度地图api 返回数据_Web前端：百度地图项目

大好，我来了，本期为大家带来的Web前端知识是”Web前端：百度地图项目“，对前端开发有兴趣的小伙伴，和我一起来看看吧！

第一节 百度地图使用

网址

http://lbsyun.baidu.com/

1.2 申请成为开发者

申请密钥

密钥：w2Tt1KYXC5CW7iBvMrLwSabkTnjsEHFt

1.3 使用百度地图

第一步：引入文件

引用百度地图API文件

<

第二步：创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<

第三步：创建地图实例

【代码】

<

地图使用

2.1地图控件

【代码】

2.2 标注

向地图添加标注

如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：

var map = new BMap.Map("container");   
 var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  
var marker = new BMap.Marker(point);   // 创建标注    
map.addOverlay(marker);          // 将标注添加到地图中 

【代码演示】

2.3 信息窗口

2.4地址解析

【地址解析代码】

【逆地址解析】

第三节 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 效果图

3.3 一级热门城市获取

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

【代码演示】

php文件：

3.4 获取二级数据

二级获取下菜单 封装一个函数处理

一级修改 二级都要对应的请求当前的热门城市的区域 被重复调用

【代码演示】

3.5 三级获取店铺信息

【代码演示】

数据获取完毕后 现在一级 二级 三级都获取了数据，但是二级 三级的方法调用，我们都是假设数据调用的，现在把二级数据和三级数据外面的调用注释掉。

逻辑：当一级热门城市获取后，才你那个获取二级数据，获取三级数据（三级获取二级可以传递空值，不用二级成功再调用。）

【修改代码演示】

第四节 联动 地图

4.1 一级修改 二级 三级联动

4.2 创建地图

4.3 地图创建标记

在三级获取成功数据后 触发，有数据了 才能渲染店铺到页面

【代码】

本期的前端知识”Web前端：百度地图项目“到此结束了，对前端开发有兴趣的小伙伴关注我，更多内容等你来看，我们下期再见！