请选择 进入手机版 | 继续访问电脑版
首页
社区
论坛 活动/培训/直播 技术博客
开发者学堂
文档 视频 YonBuilder开发体验
开发者服务
定制服务 生态合作计划 K Plan专家服务 YonMaster开发者认证 试用许可申请
积分商城
帖子

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（移动地图改变定位）




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

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


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

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

  17.                 .search {
  18.                         position: relative;
  19.                 }

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

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

  41.                 .inputbox {
  42.                         margin-top: 50px;
  43.                         background: #fff;
  44.                         height: 150px;
  45.                 }

  47.                 .top {
  48.                         padding-top: 20px;
  49.                         padding-bottom: 13px;
  50.                         width: 120px;
  51.                         margin: auto;
  52.                         text-align: center;
  53.                         overflow: hidden;
  54.                 }

  56.                 .top-item {
  57.                         font-size: 12px;
  58.                         float: left;
  59.                         margin: 0 10px;
  60.                 }

  62.                 .bottom-item {
  63.                         font-size: 12px;
  64.                         height: 50px;
  65.                         line-height: 50px;
  66.                         padding-left: 15px;
  67.                 }

  69.                 .text {
  70.                         color: #999;
  71.                 }

  73.                 .icon_dot {
  74.                         background: #5cb85c;
  75.                         border-radius: 50%;
  76.                         margin-top: 22px;
  77.                         width: 7px;
  78.                         height: 7px;
  79.                         margin-right: 15px;
  80.                 }

  82.                 .yellow {
  83.                         background: #FF7F00
  84.                 }

  86.                 .actives {
  87.                         background: #eee;
  88.                 }
  89.         </style>
  90. </head>

  92. <body>
  93.         <div class="search">
  94.                 <div class="center" tapmode onclick="fnShowCenter()">
  95.                         <div class="icon"></div>
  96.                 </div>
  97.                 <div class="inputbox">
  98.                         <div class="top">
  99.                                 <div class="top-item">
  100.                                         现在
  101.                                 </div>
  102.                                 <div class="top-item">
  103.                                         预约
  104.                                 </div>
  105.                         </div>
  106.                         <div class="bottom">
  107.                                 <div class="bottom-item flex-wrap" tapmode="actives" onclick="fnOpenStart()">
  108.                                         <div class="icon_dot green"></div>
  109.                                         <div class="flex-con border-1px-bottom ellipsis" id="startaddress">人民教育出版社印刷厂-东门</div>
  110.                                 </div>
  111.                                 <div class="bottom-item flex-wrap" tapmode="actives" onclick="fnOpenEnd()">
  112.                                         <div class="icon_dot yellow"></div>
  113.                                         <div class="flex-con" id="endaddress">
  114.                                                 <div class="ellipsis text">
  115.                                                         您要去哪
  116.                                                 </div>
  117.                                         </div>
  118.                                 </div>
  119.                         </div>
复制代码


maptwo.zip
上一篇：上架Google play，APP下载后运行提示应用签名被篡改
下一篇：上架Google play，APP下载后运行提示应用签名被篡改
评论
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
    引用
    云币在哪儿获取啊？

查看全部评论>>

APICloud官方
管理员
6688
帖子
2
粉丝数
21亿+
Y币