E企盈营销工具技术服务商 热线:4006-838-530

微信小程序地图显示与定位快速实现

E企盈直播平台营销卖货系统

最近在做微信小程序的开发,不得不说,入伙你会vue的话,小程序开发轻而易举,原理是一样的,而且比vue更简单。这里主要是利用了小程序提供的腾讯地图展示接口和定位接口进行实现的。非常方便,下面就说一下代码:页面<!–index.wxml–><view class=’view’>  <map longitude=”{{longitude}}” latitude=”{{latitude}}” markers=”{{markers}}” covers=”{{covers}}” show-location>    <cover-view>    经度:{{longitude}}    </cover-view>     <cover-view>    纬度:{{latitude}}    </cover-view>    <cover-view>    速度:{{speed}}    </cover-view>    <cover-view>    精度:{{accuracy}}    </cover-view>  </map></view>定位//index.js//获取应用实例const app = getApp()Page({  data: {    longitude:116.4965075,    latitude: 40.006103,    speed:0,    accuracy:0  },  //事件处理函数  bindViewTap: function() {     },  onLoad: function () {    var that=this    wx.showLoading({      title:”定位中”,      mask:true    })    wx.getLocation({      type: ‘gcj02’,      altitude:true,//高精度定位      //定位成功,更新定位结果      success: function (res) {        var latitude = res.latitude        var longitude = res.longitude        var speed = res.speed        var accuracy = res.accuracy               that.setData({          longitude:longitude,          latitude: latitude,          speed: speed,          accuracy: accuracy        })      },      //定位失败回调      fail:function(){        wx.showToast({          title:”定位失败”,          icon:”none”        })      },      complete:function(){        //隐藏定位中信息进度        wx.hideLoading()      }    })  },})样式/**index.wxss**//* 不加page无法全屏 */page {  height: 100%;}.view {  width: 100%;  height: 100%;}map {  width: 100%;  height: 100%;  background-color: red;}微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序地图显示与定位快速实现
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏