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

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

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值