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

版权声明： https://blog.csdn.net/GISuuser/article/details/81737581

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