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

wxml地图组件详解

最新推荐文章于 2025-09-29 13:13:42 发布

原创最新推荐文章于 2025-09-29 13:13:42 发布 · 2.2w 阅读

19 ·

CC 4.0 BY-SA版权

地图定位当前位置同时被 2 个专栏收录

1 篇文章

订阅专栏

小程序地图

1 篇文章

订阅专栏

本文介绍了如何在wxml中使用地图组件，包括设置经纬度、缩放级别、标记点、路线绘制等功能，并提供了显示当前位置及方向的具体实现方法。

首先wxml引入map组件

<!-- map.wxml -->

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