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

首先wxml引入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,//经度 
          
        })
      }
    })
  }

微信小程序地图定位当前位置_第1张图片

扫描二维码看效果

微信小程序地图定位当前位置_第2张图片

点击下载:源码地址

你可能感兴趣的:(地图定位当前位置,小程序地图)