微信小程序地图导航功能实现完整源代码附效果图(推荐)


Posted in Javascript onApril 28, 2019

正文:

一:需求及效果图展示

从后端API获取到起始地和目的地的经纬度坐标与地名。用户点击起始地便打开地图展示坐标的附近街景,路线,或者打开外部地图。

微信小程序地图导航功能实现完整源代码附效果图(推荐)

二:源代码

<block wx:for="{{data_2}}" wx:key='index' wx:if="{{data_2.length}}">
 
     <view style='margin-left:10rpx;'>订单号: {{item.order_num}}</view>
     <view class='page_row'>
      <view class='centent'>
       <view style='margin-left:10rpx;' wx:if='{{item.server_info.linkman}}'>下单人: {{item.server_info.linkman}}
        <text style='color:#999;margin-left:40rpx;font-size:32rpx;' wx:if='{{item.server_info.tel}}'>联系电话: {{item.server_info.tel}}</text>
       </view>
       <view style='color:#999;margin-top:15rpx;' wx:if='{{item.car_info.title}}'>
        <view style='color:#999;margin-left:10rpx;font-size:28rpx' bindtap='apen_add'data-name='{{item.server_info.address}}' data-latitude_siji='{{item.server_info.coordinate_start}}'><image style='width:32rpx;height:32rpx' src='../../image/location.png'/> 导航至起始地:{{item.server_info.address}} </view>
       </view>
       <view style='color:#999;margin-top:15rpx;' wx:if='{{item.car_info.title}}'>
        <view style='color:#999;margin-left:10rpx;font-size:28rpx' bindtap='apen_add' data-name='{{item.server_info.address_end_text}}' data-longitude_siji='{{item.server_info.coordinate_end}}'><image style='width:32rpx;height:32rpx' src='/image/location.png'/> 导航至目的地: {{item.server_info.address_end_text}} </view>
       </view>
       <view style='color:#999;margin-top:15rpx;' wx:if='{{item.car_info.title}}'>
        <view style='color:#999;margin-left:10rpx;font-size:28rpx'> 分配时间:{{item.time_tired}}</view>
       </view>
      </view>
     </view>
     <view class='xxx'></view>
   </block>
apen_add: function (e) {
  var that = this
  var latitude, longitude
  var name = e.currentTarget.dataset.name
  if (e.currentTarget.dataset.latitude_siji) {
   var latitude_siji = e.currentTarget.dataset.latitude_siji.split(',')
   latitude = Number(latitude_siji[0])
   longitude = Number(latitude_siji[1])
  }
  if (e.currentTarget.dataset.longitude_siji) {
   var longitude_siji = e.currentTarget.dataset.longitude_siji.split(',')
   latitude = Number(longitude_siji[0])
   longitude = Number(longitude_siji[1])
  }
  wx.getSetting({
   success: (res) => {
    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
     wx.showModal({
      title: '是否授权当前位置',
      content: '需要获取您的地理位置,请确认授权,否则地图定位功能将无法使用',
      success: function (res) {
       if (res.cancel) {
        console.info("1授权失败返回数据");
 
       } else if (res.confirm) {
        //village_LBS(that);
        wx.openSetting({
         success: function (data) {
          if (data.authSetting["scope.userLocation"] == true) {
           wx.showToast({
            title: '授权成功',
            icon: 'success',
            duration: 5000
           })
           wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            name: name,
            scale: 28
           }) 
          } else {
           wx.showToast({
            title: '授权失败',
            icon: 'success',
            duration: 5000
           })
          }
         }
        })
       }
      }
     })
    } else {
     wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      name: name,
      scale: 28
     }) 
    }
   }
  })
 },

数据请求

show_data: function () {
  var that = this;
  if (wx.getStorageSync('register') != '司机') {
   var data = {
    openid: app._openid,
    program_id: app.jtappid,
    only_num: app._openid,
    online_code: wx.getStorageSync('online_code')
   }
   var url = '/pg.php/CarTrailer/roder_list';
   util.request(url, 'get', data, '正在加载', function (res) {
    res.data.reverse()
    for (var i = 0; i < res.data.length; i++) {
     res.data[i].time_xd = util.js_date_time(res.data[i].time_xd)
     switch (res.data[i].state) {
      case '1':
       that.setData({
        data_1: that.data.data_1.concat(res.data[i]),
       })
       break;
      case '2':
       that.setData({
        data_2: that.data.data_2.concat(res.data[i]),
       })
       break;
      case '3':
       that.setData({
        data_3: that.data.data_3.concat(res.data[i]),
       })
       break;
      case '4':
       that.setData({
        data_4: that.data.data_4.concat(res.data[i]),
       })
       break;
     }
    }
   })
  } else {
   var data = {
    openid: app._openid,
    program_id: app.jtappid,
    online_code: wx.getStorageSync('online_code')
   }
   var url = '/pg.php/CarTrailer/driver_order_list';
   util.request(url, 'get', data, '正在加载', function (res) {
    for (var i = 0; i < res.data.length; i++) {
     res.data[i].time_tired = util.js_date_time(res.data[i].time_tired)
    }
    res.data.reverse()
    that.setData({
     siji: true
    })
    for (var i = 0; i < res.data.length; i++) {
     switch (res.data[i].state) {
      case '1':
       that.setData({
        data_1: that.data.data_1.concat(res.data[i]),
       })
       break;
      case '2':
       that.setData({
        data_2: that.data.data_2.concat(res.data[i]),
       })
       break;
      case '3':
       that.setData({
        data_3: that.data.data_3.concat(res.data[i]),
       })
       break;
      case '4':
       that.setData({
        data_4: that.data.data_4.concat(res.data[i]),
       })
       break;
     }
    }
   })
  }
 },

以上所述是小编给大家介绍的微信小程序地图导航功能实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
Prototype框架详解
Nov 25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
layui文件上传实现代码
May 20 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
You might like
基于initPHP的框架介绍
2013/04/18 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
js实现双色球效果
2020/08/02 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
python3调用windows dos命令的例子
2019/08/14 Python
Python for循环及基础用法详解
2019/11/08 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
歌唱比赛主持词
2014/03/18 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android