这篇文章是我推荐给大家有想法学习前端开发的朋友,或者是已经开始学习web前端的小伙伴,之前就有很多的朋友跟我说,学习编程学习前端的时候总是摸不到头脑,不知道应该去哪里找项目,今天就和大家分享一下我自己之前模仿的百度地图api做的一个小项目,也希望可以给再学习的小伙伴一起学习进步。
百度地图使用
1.1 注册
百度地图:掌握当前的位置在网页显示位置,插入地图 拖拽,点击事件。
应用场景:网页插入百度地图
![690a32ce785f81f8416b0b016e02bf60.png](https://img-blog.csdnimg.cn/img_convert/690a32ce785f81f8416b0b016e02bf60.png)
注意:定位 距离 公交 不关心。
官网:http://lbsyun.baidu.com/
![8fd5da5e90fcd0c9d1c92ed70c16b9e6.png](https://img-blog.csdnimg.cn/img_convert/8fd5da5e90fcd0c9d1c92ed70c16b9e6.png)
![cf1ee42f41b3dc2a12922979ed78d30f.png](https://img-blog.csdnimg.cn/img_convert/cf1ee42f41b3dc2a12922979ed78d30f.png)
![80a3e5bfe2800a164fa27c1274427e96.png](https://img-blog.csdnimg.cn/img_convert/80a3e5bfe2800a164fa27c1274427e96.png)
![be87448e922442f13ac31c22c96cdd1c.png](https://img-blog.csdnimg.cn/img_convert/be87448e922442f13ac31c22c96cdd1c.png)
1.2 获取账号和密钥
1. 注册百度账号
2. 申请成为百度开发者
3. 获取密钥
![43fd7f637f8ecac3aeb920a772f1fd70.png](https://img-blog.csdnimg.cn/img_convert/43fd7f637f8ecac3aeb920a772f1fd70.png)
提交
![e0ef4d40a90470c2037ff3ecf2bdb5f1.png](https://img-blog.csdnimg.cn/img_convert/e0ef4d40a90470c2037ff3ecf2bdb5f1.png)
密钥:oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi
再次查看密钥:
![15c0d667064987dfd86ee8b6d5308114.png](https://img-blog.csdnimg.cn/img_convert/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](https://img-blog.csdnimg.cn/img_convert/dffbb16e6953600ccb5b8523785cc619.png)
第2节 控件和标记
2.1 添加控件
效果:
![f57c3626f949961e71e4514f692b59e3.png](https://img-blog.csdnimg.cn/img_convert/f57c3626f949961e71e4514f692b59e3.png)
api位置
![35cc23f523b44925d9bc4e96878d1f2f.png](https://img-blog.csdnimg.cn/img_convert/35cc23f523b44925d9bc4e96878d1f2f.png)
【代码】
![9290be8f64ee4f6f181a24c3a5633e01.png](https://img-blog.csdnimg.cn/img_convert/9290be8f64ee4f6f181a24c3a5633e01.png)
2.2 标注
![ceaf5f74bfad78d8599f22ad8dd00ad5.png](https://img-blog.csdnimg.cn/img_convert/ceaf5f74bfad78d8599f22ad8dd00ad5.png)
![115d3577d4e4dd9d4e6e3fea7ff963dc.png](https://img-blog.csdnimg.cn/img_convert/115d3577d4e4dd9d4e6e3fea7ff963dc.png)
2.3 信息窗口
效果:
![1ae8fc430c262090c230b873248565d9.png](https://img-blog.csdnimg.cn/img_convert/1ae8fc430c262090c230b873248565d9.png)
![2bddc92aa97099b9d3d65cf36d4f080a.png](https://img-blog.csdnimg.cn/img_convert/2bddc92aa97099b9d3d65cf36d4f080a.png)
![9c076dfff45dd783ed651020d9c08e5d.png](https://img-blog.csdnimg.cn/img_convert/9c076dfff45dd783ed651020d9c08e5d.png)
2.4 地址解析
![f09484e73c96d39c483c0a8d2dca037a.png](https://img-blog.csdnimg.cn/img_convert/f09484e73c96d39c483c0a8d2dca037a.png)
![3d3c057ff478a25ab8d4f9c7fe983c2b.png](https://img-blog.csdnimg.cn/img_convert/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](https://img-blog.csdnimg.cn/img_convert/5549f99fe6fe0a976a552b78fbcf6f24.png)
3.3 一级热门城市获取
先获取一级下拉的内容区域 ,请求我们的接口内容 会产生跨域 ,我们采用后台php代理访问接口,我们本地访问php这个接口
【代码演示】
![223566e7b5efd131e9a71703679e25ac.png](https://img-blog.csdnimg.cn/img_convert/223566e7b5efd131e9a71703679e25ac.png)
【代码】
![6e121069b2b893356dfc991898cb646d.png](https://img-blog.csdnimg.cn/img_convert/6e121069b2b893356dfc991898cb646d.png)