宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-25

正文:

一:需求及效果图展示

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

二:源代码

对于=' { { data _ 2 } } ' wx :键=' index ' wx : if=' { { data _ 2 } '的块wx :长度} } '视图样式='左边距:10 rpx'订单号:{ { item。order _ num } }/view view class=' page _ row ' view class=' centet ' view style=' margin-left :10 rpx;'wx : if=' { { item。服务器信息。链接人} }”下单人:{{item.server_info.linkman}}文本样式=' color: # 999左边距left :40 rpx ' font-size :32 rpx;wx : if=' { { item。服务器信息。电话} } '联系电话:{ { item。服务器信息。tel } }/text/view view style=' color : # 999;“页边距-顶部:15 rpx”wx : if=' { { item。汽车信息。标题} } '视图样式=' color: # 999左边距left :10 rpx font-size :28 rpx ' bind tap=' apen _ add ' data-name=' { { item。服务器信息。address } } ' data-latitude _ Siji=' { { item。服务器信息。坐标_开始} } '图像样式=' width :32 rpxhway :32 rpx ' src='././image/location.png'/导航至起始地:{ { item。服务器信息。address } }/view/view view style=' color : # 999;页边距-top :15 rpx;wx : if=' { { item。汽车信息。标题} } '视图样式=' color: # 999左边距left :10 rpx font-size :28 rpx ' bind tap=' apen _ add ' data-name=' { { item。服务器信息。address _ end _ text } } '数据-经度_ Siji=' { { item。服务器信息。coordinate _ end } } ' image style=' width :32 rpx;高度:32 rpx ' src='/图像/位置。png‘/导航至目的地:{ { item。服务器信息。address _ end _ text } }/view/view view style=' color : # 999;页边距-top :15 rpx;wx : if=' { { item。汽车信息。标题} } '视图样式=' color: # 999左边距left :10 rpx ' font-size :28 rpx '分配时间:{ { item.time _疲惫} }/view/view/view/view view class=' XXX '/view/block apen _ add : function(e){ var那=这个定义变量纬度,经度var name=e . currenttarget。数据集。名称if(e . currenttarget。数据集。lati _ Siji){ var lati _ Siji=e . current target。数据集。lation _ Siji。拆分(',')纬度=Number(lati _ Siji[0])经度=Number(lati _ Siji[lati=]未定义的RES . authsetting['范围。用户位置']!=true){ wx。ShowModal({ title : '是否授权当前位置,content: '需要获取您的地理位置,请确认授权,否则地图定位功能将无法使用,成功:函数如果取消控制台。信息(' 1授权失败返回数据');} else if(RES . confirm){//village _ LBS(即);wx。opensetting({ success :函数(数据){ if(数据。authsetting['作用域。用户位置']==true){ wx。显示吐司({ title : '授权成功,icon:“成功”,持续时间: 5000 })wx。open location({ 0纬度:经度:名称:名称,比例尺: 28 })其他{ wx。显示吐司({ title : '授权失败,icon: 'success ',持续时间: 5000 })})})else { wx。open location({ 0纬度:经度:名称:名称,比例尺: 28 })})})},数据请求

show_data:函数(){ var=thisif (wx.getStorageSync('register ')!='司机){ var data={ openid: app ._openid,program_id: app.jtappid,only _ num: app ._openid,在线_代码: wx。getstorage ync(' online _ code ')} var URL='/pg。PHP/CartRailer/roder _ list ';乌提尔。请求(网址,“获取”,数据)正在加载,函数数据。反向()为(var I=0;一、资源数据。长度;i ) { res.data[i].time _ xd=util。js _ date _ time(RES . data[I]).时间_xd)开关(res.data[i]).陈述){ case ' 1 ' :setdata({ data _ 1:那。数据。data _ 1。concat(RES . data[I]),})break;案例二:setdata({ data _ 2:数据。data _ 2。concat(RES . data[I]),})break;案例' 3 ' :setdata({ data _ 3:数据。data _ 3。concat(RES . data[I]),})break;案例' 4 ' :setdata({ data _ 4:数据。data _ 4。concat(RES . data[I]),})break;} } })else { var data={ OpenID : app ._openid,program_id: app.jtappid,online _ code : wx。getstorageync(' online _ code ')} var URL='/pg。PHP/CartRailer/driver _ order _ list ';乌提尔。请求(网址,“获取”,数据)正在加载,函数(RES){ for(var I=0;一、资源数据。长度;i ) { res.data[i].时间_疲惫=util.js_date_time(res.data[i]).时间_疲惫)} RES . data。颠倒一下。setdata({ si ji: true })为(var I=0;一、资源数据。长度;i ) { switch (res.data[i]).陈述){ case ' 1 ' :setdata({ data _ 1:那。数据。data _ 1。concat(RES . data[I]),})break;案例二:setdata({ data _ 2:数据。data _ 2。concat(RES . data[I]),})break;案例' 3 ' :setdata({ data _ 3:数据。data _ 3。concat(RES . data[I]),})break;案例' 4 ' :setdata({ data _ 4:数据。data _ 4。concat(RES . data[I]),})break;} } }) } },以上所述是小编给大家介绍的微信小程序地图导航功能实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

更多资讯
游戏推荐
更多+