微信小程序-如何引入地图组件及显示当前所在位置

 1、代码部分

 wxml

<view class="view">
   <map id="map" 
   longitude="{{longitude}}"  //经度
   latitude="{{latitude}}"    //纬度
   show-location="true" >     //是否显示当前定位
   </map>
</view>

 xwss

.view {
  position: absolute;
  width: 100%;
  height: 80%;
  bottom: 20%;
}

 js

 data: { 
   //自定义标记点数组
  	markers:[],
   //纬度
   latitude:'',
   //经度
   longitude:'',
 },
onLoad: function() { 
 var that = this; 
//  获取当前定位的经纬度信息
wx.showLoading({
  title:"定位中",
  mask:true
})
wx.getLocation({
  type: 'gcj02',
  altitude:true,//高精度定位
  //定位成功，更新定位结果
  success: function (res) {
    var latitudee = res.latitude
    var longitudee = res.longitude
    that.setData({
      longitude:parseFloat(longitudee),
      latitude: parseFloat(latitudee),
    })
  },
  //定位失败回调
  fail:function(){
    wx.showToast({
      title:"定位失败",
      icon:"none"
    })
  },
  complete:function(){
    //隐藏定位中信息进度
    wx.hideLoading()
  }
})
}, 

 2、在app.json中添加代码，用于授权定位

 3、效果查看

 END