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

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

微信小程序显示地图与定位实现，比起用Vue实现要简单得多。下面说一下代码：
1.页面

<!--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>

2.定位

//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()
      }
 
    })
  },
})

3.样式（全屏）

/**index.wxss**/
/* 不加page无法全屏 */
page {
  height: 100%;
}
 
.view {
  width: 100%;
  height: 100%;
}
 
map {
  width: 100%;
  height: 100%;
  background-color: red;
}

效果图：