最近在做微信小程序的开发，不得不说，入伙你会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;}
