查看: 1665|回复: 0

[DIV/CSS] web前端实用案例-开发饿了么LBS移动地图点餐系统

发表于 2018-4-6 08:00:00

web前端实用案例-开发饿了么LBS移动地图点餐系统
知识点:html/css,标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、逻辑思维。

html代码

  1. <div class="top">
  2. <div class="t-header">
  3. <div class="t-logo">
  4. <a href="#">
  5. <img src="images/logo.png" alt="饿了么点餐网" width="220" height="23" />
  6. </a>
  7. </div>
  8. <div class="t-desc">LBS移动点餐系统</div>
  9. </div>
  10. </div>
  11. <!--end top-->
  12. <!--content start-->
  13. <div class="content">
  14. <div class="c-title">点外卖,上饿了么 !</div>
  15. <div class="c-con" id="c-map"></div>
  16. <!--search start-->
  17. <div class="search">
  18. <input type="text" class="s-text" placeholder="请输入地址 ..." id="s-search"/><input type="button" class="s-btn" value="搜 索" />
  19. </div>
  20. <!--end search-->
  21. </div>
复制代码

css代码

  1. <style type="text/css">
  2. *{margin:0;padding:0;}
  3. body{background:url("images/bg.png");font-size:12px;font-family:"微软雅黑";color:#666;}
  4. /*top start*/
  5. .top{width:100%;height:40px;margin:30px 0;}
  6. .top .t-header{width:1000px;height:40px;margin: 0 auto;}
  7. .top .t-header .t-logo{float:left;margin-top:10px;}
  8. .top .t-header .t-desc{float:right;line-height:40px;font-size:16px;color:#fff;}
  9. /*end top*/
  10. /*content start*/
  11. .content{width:1000px;height:600px;margin:0 auto;position:relative;}
  12. .content .c-title{height:60px;background:#f90;text-align:center;line-height:60px;font-size:22px;font-weight:300;color:#fff;}
  13. .content .c-con{width:1000px;height:540px;}
  14. /*end content*/
  15. /*search start*/
  16. .search{width:610px;height:56px;background:#6cf;box-shadow: 1px 2px 10px -2px #000;position:absolute;top:100px;left:200px;}
  17. .search .s-text{width:490px;height:56px;border:none;outline:none;padding-left:10px;}
  18. .search .s-btn{width:110px;height:56px;background:#f30;border:none;color:#fff;cursor: pointer;outline:none;}
  19. .search .s-btn:hover{background:#cc2800;}
  20. /*end search*/
  21. </style>
复制代码

javascript代码:

  1. <script src="http://webapi.amap.com/maps"></script>
  2. <script type="text/javascript">
  3. //地图加载
  4. var map = new AMap.Map("c-map", {
  5. resizeEnable: true
  6. });
  7. //输入提示
  8. var autoOptions = {
  9. input: "s-search"
  10. };
  11. var auto = new AMap.Autocomplete(autoOptions);
  12. var placeSearch = new AMap.PlaceSearch({
  13. map: map
  14. }); //构造地点查询类
  15. AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
  16. function select(e) {
  17. placeSearch.setCity(e.poi.adcode);
  18. placeSearch.search(e.poi.name); //关键字查询查询
  19. }
  20. </script>
复制代码

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。
关注公众号→‘学习web前端’开启你的web前端学习之路



回复

使用道具 举报