手把手教你：在微信小程序中加载map并实现拖拽添加标记定位

本文将为大家详细介绍如何在微信小程序中加载map组件，并实现拖拽标记定位功能。

实现步骤

1、首先，我们需要在项目的app.json文件中添加map组件的相关配置。如下所示：

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

permission字段用于申请用户位置权限

2、在index.wxml文件中，添加以下代码：

<map
  id="map"
  longitude="116.391275"
  latitude="39.90765"
  scale="14"
  markers="{{markers}}"
  show-location
  subkey="你的腾讯地图服务密钥"
  bindregionchange="onRegionChange"
></map>

 这里的longitude和latitude分别表示地图中心点的经纬度，scale表示地图缩放级别，markers表示地图上的标记点，show-location表示是否显示当前位置。onRegionChange是拖拽地图的方法。可以根据你的项目实际需求通过绑定变量动态设置。

3、实现标记定位功能

1. 在index.js中添加以下代码：

Page({
  data: {
    markers: []
  },
  onLoad: function() {
    this.getLocation();
  },
  getLocation: function() {
    var that = this;
    wx.getLocation({
      type: 'gcj02', // 返回的经纬度坐标类型
      success: function(res) {
        that.setData({
          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: '我的位置',
            iconPath: '/images/location.png', // 标记点图标
            width: 30,
            height: 30
          }]
        });
      }
    });
  }
});

2、在index.wxss中添加以下样式：

#map {
  width: 100%;
  height: 300px; /* 根据实际需求调整地图高度 */
}

4、拖拽地图

 // 拖拽地图
  onRegionChange: function(e) {
    // 处理地图视野变化事件
    if (e.detail.type === 'end' && (e.detail.causedBy === 'drag' || e.causedBy === 'drag')) {
      // 检测到拖动结束
      this.setData({
        longitude: e.detail.centerLocation.longitude,
        latitude: e.detail.centerLocation.latitude,
      });
    }
  }