微信小程序显示骑手位置

微信小程序显示骑手位置,第1张

微信小程序可以通过使用地图接口来显示骑手的位置,首先,需要在小程序中引入微信地图SDK,然后调用相关的接口,获取骑手的实时位置信息,并将其显示在小程序的地图上,以便用户查看骑手的位置。此外,还可以使用路线规划功能,查看骑手到达目的地的路线,以及预估到达时间,以便用户更好地跟踪骑手的位置。

微信小程序官方文档关于地理信息的相关API有如下方法可以获得用户当前地理位置:

wxgetLocation(OBJECT)

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。

小程序桥接主要指的是把小程序和外部的一些第三方服务数据相连接的过程。

在小程序桥接的过程中,需要使用小程序的"接口能力"和"云开发能力",以调用各种第三方服务的接口来建立桥接。

1 首先,使用小程序的接口能力,建立一个第三方接口请求,调用第三方所提供的地址;

2 然后,使用小程序的封装能力,将请求接口发送给小程序端;

3因为有一个中间件,所以小程序会将客户端发送的请求封装拆封到不同的请求中;

4 最后,使用小程序的云开发能力,将封装后的请求发送给客户端,客户端收到服务端的响应,完成访问小程序第三方服务的数据同步。

在微信小程序实现简单定位功能,简单易读,获取经纬度信息,在pages下创建一个单页,举例如local页面,配置该类页面的js、wxml、json文件,来完成定位api接口的引用

localjs如下

var app = getApp()  

Page({ 

    data:{

       latitude:'',

       longitude:''

    },

getLocation:function(e) {

    consolelog(e)

    var that = this

    wxgetLocation({

      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wxopenLocation 的坐标

      success: function(res){

        consolelog(res)     

      thatsetData({

              longitude:reslongitude,

              latitude:reslatitude        

      })

    }

 })

}

})

localwxml如下

<view class="page-body">

<view class="page-body-form">

    <text class="page-body-form-key">经度:</text>

    <input class="page-body-form-value" type="text" 

    value="{{longitude}}" name="longitude"></input>

    <text class="page-body-form-key">纬度:</text>

    <input class="page-body-form-value" type="text" 

    value="{{latitude}}" name="latitude"></input>  

    <view class="page-body-buttons">

    <button class="page-body-button" type="primary" 

    bindtap="getLocation">获取位置</button>

    </view>

</view>

</view>

appjson如下

{

  "pages":[

    "pages/local/local"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "定位",

    "navigationBarTextStyle":"black"

  }

}

使用别的开发工具或者源码模式底下,直接在manifestjson文件中找到mp-weixin的配置项,在permission底下加上scopeuserLocation位置接口权限,如下:

"mp-weixin" : {

"appid" : "",

"setting" : {

"urlCheck" : false,

"es6" : false,

"postcss" : false,

"minified" : true

},

"usingComponents" : true,

"permission" : { // 在这里加权限

"scopeuserLocation" : {

"desc" : "XXX" // 必填

}

}

},

在编译成微信小程序以后,可以看到小程序项目底下的appjson文件中的permission底下有了位置接口权限:

"permission": {

"scopeuserLocation": {

"desc": "XXX"

}

},

然后安卓真机便可以使用chooseLocation方法获取位置信息了。

以上就是关于微信小程序显示骑手位置全部的内容,包括:微信小程序显示骑手位置、微信小程序获取到位置坐标后,怎么获取具体地理位置信息、如何桥接小程序等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/9470627.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存