微信小程序地图定位当前位置

首先wxml引入map组件
 

<!-- map.wxml -->

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

map组件中增加：show-location属性后，访问地图就显示显示带有方向的当前定位点

 

也可以做成事件：

  currentLoaction:function(e){//地图上显示图标
    wx.getSystemInfo({
      success: function (res) {
        widthCtr = res.screenWidth;
        //console.log(widthCtr + "=====");
        e.setData({
          height: res.windowHeight - 59,
          controls: [
            {
              id: 1,
              iconPath: '../images/1.png',
              position: {
                left: res.screenWidth - 50,
                top: 300 - 50,
                width: 30,
                height: 30
              },
              clickable: true
            }
          ]
        })


      }
    })
  }

触发定位当前事件

  controltap(e) {
    var that = this;
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,//纬度 
          longitude: longitude,//经度 
          
        })
      }
    })
  }

扫描二维码看效果

点击下载：源码地址