请选择 进入手机版 | 继续访问电脑版

bMap百度地图仿滴滴打车首页Demo(移动地图改变定位)

技术博客 2022-4-22 10:05 2155人浏览 23人回复
原作者: Mr.ZhouHeng 收藏 邀请
摘要

bMap百度地图仿滴滴打车首页Demo bMap百度地图仿滴滴打车首页Demo(移动地图改变定位) // 监听地图拖动 bMap.addEventListener({ name: 'viewChange' }, function(ret) { ...

bMap百度地图仿滴滴打车首页Demo


193521conb7tljhyvudj0u.png


bMap百度地图仿滴滴打车首页Demo(移动地图改变定位)




  1. // 监听地图拖动
  2.                 bMap.addEventListener({
  3.                         name: 'viewChange'
  4.                 }, function(ret) {
  5.                         if (ret.status) {
  6.                                 bMap.getCenter(function(ret) {
  7.                                         fnGetNameFromCoords(ret);//拖动定位
  8.                                 });
  9.                         }
  10.                 });

  11.         //  设置开始地址
  12.         function fnGetNameFromCoords(ret) {
  13.                 bMap.getNameFromCoords({
  14.                         lon: ret.lon,
  15.                         lat: ret.lat
  16.                 }, function(ret, err) {
  17.                         if (ret.status) {
  18.                           $api.setStorage('retloglat', ret);//储存一下坐标
  19.                                 api.execScript({
  20.                                         frameName: 'bmap_frmbottom',
  21.                                         script: 'fnStrataAdress("' + ret.sematicDescription + '");'//改变初始定位
  22.                                 });
  23.                         } else {
  24.                                 api.toast({
  25.                                         msg: '获取地址信息失败',
  26.                                         duration: 2000,
  27.                                         location: 'bottom'
  28.                                 });
  29.                         }
  30.                 });
  31.         }
复制代码


底部地址变换
  1. <!doctype html>
  2. <html>

  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="maximum-scale=2.0,minimum-scale=1.0,user-scalable=1,width=device-width,initial-scale=1.0" />
  6.         <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.         <title>底部</title>
  8.         <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9.         <link rel="stylesheet" type="text/css" href="../../css/public.css" />
  10.         <style>
  11.                 html,
  12.                 body {
  13.                         background-color: inherit;
  14.                 }

  15.                 .search {
  16.                         position: relative;
  17.                 }

  18.                 .center {
  19.                         position: absolute;
  20.                         top: -50px;
  21.                         right: 0;
  22.                         width: 30px;
  23.                         height: 30px;
  24.                         padding: 5px;
  25.                         background: #fff;
  26.                         border-radius: 50%;
  27.                 }

  28.                 .icon {
  29.                         width: 30px;
  30.                         height: 30px;
  31.                         background: url(../../image/icon/myPosition.png);
  32.                         background-position: center center;
  33.                         background-size: 30px 30px;
  34.                         background-repeat: no-repeat;
  35.                 }

  36.                 .inputbox {
  37.                         margin-top: 50px;
  38.                         background: #fff;
  39.                         height: 150px;
  40.                 }

  41.                 .top {
  42.                         padding-top: 20px;
  43.                         padding-bottom: 13px;
  44.                         width: 120px;
  45.                         margin: auto;
  46.                         text-align: center;
  47.                         overflow: hidden;
  48.                 }

  49.                 .top-item {
  50.                         font-size: 12px;
  51.                         float: left;
  52.                         margin: 0 10px;
  53.                 }

  54.                 .bottom-item {
  55.                         font-size: 12px;
  56.                         height: 50px;
  57.                         line-height: 50px;
  58.                         padding-left: 15px;
  59.                 }

  60.                 .text {
  61.                         color: #999;
  62.                 }

  63.                 .icon_dot {
  64.                         background: #5cb85c;
  65.                         border-radius: 50%;
  66.                         margin-top: 22px;
  67.                         width: 7px;
  68.                         height: 7px;
  69.                         margin-right: 15px;
  70.                 }

  71.                 .yellow {
  72.                         background: #FF7F00
  73.                 }

  74.                 .actives {
  75.                         background: #eee;
  76.                 }
  77.         </style>
  78. </head>

  79. <body>
  80.         <div class="search">
  81.                 <div class="center" tapmode onclick="fnShowCenter()">
  82.                         <div class="icon"></div>
  83.                 </div>
  84.                 <div class="inputbox">
  85.                         <div class="top">
  86.                                 <div class="top-item">
  87.                                         现在
  88.                                 </div>
  89.                                 <div class="top-item">
  90.                                         预约
  91.                                 </div>
  92.                         </div>
  93.                         <div class="bottom">
  94.                                 <div class="bottom-item flex-wrap" tapmode="actives" onclick="fnOpenStart()">
  95.                                         <div class="icon_dot green"></div>
  96.                                         <div class="flex-con border-1px-bottom ellipsis" id="startaddress">人民教育出版社印刷厂-东门</div>
  97.                                 </div>
  98.                                 <div class="bottom-item flex-wrap" tapmode="actives" onclick="fnOpenEnd()">
  99.                                         <div class="icon_dot yellow"></div>
  100.                                         <div class="flex-con" id="endaddress">
  101.                                                 <div class="ellipsis text">
  102.                                                         您要去哪
  103.                                                 </div>
  104.                                         </div>
  105.                                 </div>
  106.                         </div>
复制代码


maptwo.zip
评论
2155人参与,23条评论

精彩评论
  • angelshelter 半专业车手 1891Y币
    发表于 2019-4-30 18:51
    本帖最后由 angelshelter 于 2019-4-30 18:55 编辑

    强悍
  • 得呤 老司机 5646Y币
    发表于 2019-4-30 18:52
    要出第二版了啊?占个沙发
  • Mr.ZhouHeng 老司机 13001Y币
    发表于 2019-4-30 18:53
    得呤 发表于 2019-4-30 18:52
    要出第二版了啊?占个沙发

    这个是一个长期的东西后面慢慢完善吧
  • 嗯哼嗯哼 入门司机 10513Y币
    发表于 2019-4-30 20:59
    还是大佬厉害,坐等源码
  • 得呤 老司机 5646Y币
    发表于 2019-4-30 21:53
    沙发被抢了
  • 易大侠 半专业车手 3447Y币
    发表于 2019-5-5 10:41
    大佬牛逼!(破音)
  • Mr.ZhouHeng 老司机 13001Y币
    发表于 2019-5-5 10:45
    易大侠 发表于 2019-5-5 10:41
    大佬牛逼!(破音)

    贱笑贱笑
  • lewgum 驾校小白 32Y币
    发表于 2019-5-5 17:11
    这个好,我正好要开发地图方面的。
  • secondar 马路杀手 1044Y币
    发表于 2019-5-7 14:29
    微信截图_20190507142917.png
    滴滴打人?????????????????????????????
  • Mr.ZhouHeng 老司机 13001Y币
    发表于 2019-5-7 14:50
    secondar 发表于 2019-5-7 14:29
    滴滴打人?????????????????????????????

    一开始觉得逗逼  后来被骂了所以改  我让运营改改
  • 技术咨询-F 管理员 27051Y币
    发表于 2019-5-17 17:36
    建议增加截图,看效果。
    。。。原来是系列教程啊
  • o魑魅魍魉o 驾校小白 11Y币
    发表于 2019-10-8 13:26
    云币不足。买不了啊。
  • 小坏0803 驾校小白 1Y币
    发表于 2020-4-13 00:30

    还是大佬厉害,坐等源码
  • 木子李12581 驾校小白 0Y币
    发表于 2020-5-19 16:16
    厉害!我想看看源码是什么,但是没有云币
  • 付中兴 驾校小白 0Y币
    发表于 2020-8-9 18:58
    回复蹭云币。。。。
  • 付中兴 驾校小白 0Y币
    发表于 2020-8-9 18:58
    谢谢分享
  • cloudy809 实习司机 82Y币
    发表于 2020-9-23 12:05
    8错8错
  • ruxiongwei 驾校小白 5Y币
    发表于 2021-2-19 15:43
    谢谢分享
  • fei_fei 驾校小白 3Y币
    发表于 2021-3-19 00:54
    云币在哪儿获取啊?

查看全部评论>>