![4b56e2641577daf00ad49aa7ece0c7a5.png](https://i-blog.csdnimg.cn/blog_migrate/c2cd59db135d8276a48aadb50981f647.jpeg)
大好,我来了,本期为大家带来的Web前端知识是”Web前端:百度地图项目“,对前端开发有兴趣的小伙伴,和我一起来看看吧!
第一节 百度地图使用
网址
http://lbsyun.baidu.com/
![43539fde5cd184c24f6eb20b4d992355.png](https://i-blog.csdnimg.cn/blog_migrate/3015792d80907c95002b706838d8c860.png)
![a291e407b3309479a43c813e1bc31c69.png](https://i-blog.csdnimg.cn/blog_migrate/c0914f0323403cbaf0c8c397533e678e.jpeg)
![6eaed5a579e6783443d25c6a7309a126.png](https://i-blog.csdnimg.cn/blog_migrate/a29ab87e2748d8c159a953489a286535.jpeg)
1.2 申请成为开发者
![906b2b36242bcd0242063fcb6df47d33.png](https://i-blog.csdnimg.cn/blog_migrate/db044e45212ffd1d003a7619f8acc7e3.png)
申请密钥
![b5d6ed9fb71b947caa08846ea8723ca2.png](https://i-blog.csdnimg.cn/blog_migrate/5bd5434b28f4d68317fdf8d954330201.jpeg)
![249664993bb671b9376f7913847d6760.png](https://i-blog.csdnimg.cn/blog_migrate/bb821de7036a2155eac75561d1a541d4.png)
密钥:w2Tt1KYXC5CW7iBvMrLwSabkTnjsEHFt
1.3 使用百度地图
第一步:引入文件
引用百度地图API文件
<
第二步:创建地图容器元素
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。
<
第三步:创建地图实例
【代码】
<
地图使用
2.1地图控件
![405c1a2e4a32019e6602003a5554242d.png](https://i-blog.csdnimg.cn/blog_migrate/a18e089903dcedc4a0fa96ad68299547.png)
【代码】
![558232670141ae7294ed54b0b037cd0e.png](https://i-blog.csdnimg.cn/blog_migrate/130c1325426e9de4c681ff02b7876ac4.jpeg)
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); // 将标注添加到地图中
【代码演示】
![40468663593c0ba7b40af9d8f483e29f.png](https://i-blog.csdnimg.cn/blog_migrate/c0673333697d9704d32498f4ae3a0608.jpeg)
2.3 信息窗口
![ea25bd9ecd4a41c8a7421f2674cd4ed5.png](https://i-blog.csdnimg.cn/blog_migrate/6dd48d63a6d051b01ed5dfa2161d7e49.jpeg)
2.4地址解析
【地址解析代码】
![9febd915fe17eee61aa904da5439681d.png](https://i-blog.csdnimg.cn/blog_migrate/2731d960c13a1024fe98fc373d7021ea.jpeg)
【逆地址解析】
![cc2ff954cc199bcf0f335a19784c010b.png](https://i-blog.csdnimg.cn/blog_migrate/5eac550681aa819595f100966bfa3b6c.jpeg)
第三节 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 效果图
![858419cefc7e0e0387ed4ce019308016.png](https://i-blog.csdnimg.cn/blog_migrate/f9b71e7c05d2d63575e5ce4dcdba98a1.jpeg)
3.3 一级热门城市获取
先获取一级下拉的内容区域 ,请求我们的接口内容 会产生跨域 ,我们采用后台php代理访问接口,我们本地访问php这个接口
【代码演示】
![1d92a45880bf33edb7c294447948f685.png](https://i-blog.csdnimg.cn/blog_migrate/b54afc4e53ca251c9cb5a74418e02cdb.png)
![92fdd188a17b8d2bf1e5319a8806d37e.png](https://i-blog.csdnimg.cn/blog_migrate/5621a75239cda49415f57834f1cf1355.jpeg)
php文件:
![1191714454b9a29cfef69c28c8145f08.png](https://i-blog.csdnimg.cn/blog_migrate/23de21a5ac038a3fad34dac67b54d88a.png)
3.4 获取二级数据
二级获取下菜单 封装一个函数处理
一级修改 二级都要对应的请求当前的热门城市的区域 被重复调用
![66b3f3b1bad79279c463bb7ad2458585.png](https://i-blog.csdnimg.cn/blog_migrate/2fdff7eceb7a2b31e12a28901763fb85.png)
【代码演示】
![158c417fb48541bef4913e9d9d4f238d.png](https://i-blog.csdnimg.cn/blog_migrate/964ba0bf313b7f068c11458009231377.jpeg)
3.5 三级获取店铺信息
【代码演示】
![bf15854d153960423b5da969e4101b0e.png](https://i-blog.csdnimg.cn/blog_migrate/e0c0a077bbffb48504ae67b8238f7ff1.jpeg)
数据获取完毕后 现在一级 二级 三级都获取了数据,但是二级 三级的方法调用,我们都是假设数据调用的,现在把二级数据和三级数据外面的调用注释掉。
逻辑:当一级热门城市获取后,才你那个获取二级数据,获取三级数据(三级获取二级可以传递空值,不用二级成功再调用。)
【修改代码演示】
![4430e983e9676b1dfbe2e7e1f5dbb2d2.png](https://i-blog.csdnimg.cn/blog_migrate/8452684f0dbe5f4a9ee00a34b5cd2a13.jpeg)
第四节 联动 地图
4.1 一级修改 二级 三级联动
![feccb88cf4434604a67ad60490c7fcff.png](https://i-blog.csdnimg.cn/blog_migrate/ec5e1d4e3b5546af53f27dcc03184e41.png)
4.2 创建地图
![e19b3448ade04b9bf17d6bf83bb8aeff.png](https://i-blog.csdnimg.cn/blog_migrate/bb9bdcbebc3d030da2837ef474ef7da3.png)
4.3 地图创建标记
在三级获取成功数据后 触发,有数据了 才能渲染店铺到页面
![3eff6620744d7c3548ba0e2d17600ee3.png](https://i-blog.csdnimg.cn/blog_migrate/cf3a8a03721ab89543b3901f7c272a82.jpeg)
【代码】
![debdbbfa176b26356d5b0f7ac10cd950.png](https://i-blog.csdnimg.cn/blog_migrate/3dacc5fb7a44143afb384b51f3bc003a.jpeg)
本期的前端知识”Web前端:百度地图项目“到此结束了,对前端开发有兴趣的小伙伴关注我,更多内容等你来看,我们下期再见!