这篇文章是我推荐给大家有想法学习前端开发的朋友,或者是已经开始学习web前端的小伙伴,之前就有很多的朋友跟我说,学习编程学习前端的时候总是摸不到头脑,不知道应该去哪里找项目,今天就和大家分享一下我自己之前模仿的百度地图api做的一个小项目,也希望可以给再学习的小伙伴一起学习进步。
百度地图使用
1.1 注册
百度地图:掌握当前的位置在网页显示位置,插入地图 拖拽,点击事件。
应用场景:网页插入百度地图
注意:定位 距离 公交 不关心。
官网:http://lbsyun.baidu.com/
1.2 获取账号和密钥
1. 注册百度账号
2. 申请成为百度开发者
3. 获取密钥
提交
密钥:oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi
再次查看密钥:
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);
第2节 控件和标记
2.1 添加控件
效果:
api位置
【代码】
2.2 标注
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这个接口
【代码演示】
【代码】