小程序引入地图及手绘地图

发布时间：2024-06-28 热度：

小程序中map标签的使用方法主要涉及到在WXML文件中引入地图组件、在JS文件中设置地图的相关参数以及事件处理，下面我将分步骤详细说明：

1. 引入地图组件

首先，你需要在小程序的WXML文件中引入地图组件。这通常通过在小程序的JSON文件中声明，或者在WXML文件中直接使用组件标签来完成。

在WXML文件中直接使用：

<map   
  id="myMap"   
  longitude="{{longitude}}"   
  latitude="{{latitude}}"   
  markers="{{markers}}"   
  show-location="{{true}}"   
  style="width: 100%; height: 100%;"  
  bindmarkertap="markertap"  
  bindregionchange="regionchange"  
></map>

2. 设置地图参数

在JS文件中，你需要设置地图的初始参数，如经纬度、缩放级别、标记点等。

Page({
  data: {
    latitude: 23.10229, // 初始纬度
    longitude: 113.334521, // 初始经度
    scale: 16, // 初始缩放级别
    markers: [ // 标记点数组
      {
        id: 1,
        longitude: 113.324520,
        latitude: 23.099994,
        name: 'T.I.T 创意园'
      },
      // 可以添加更多标记点
    ],
    // 如有需要，可以添加controls等其他属性
  },
  // ... 其他页面逻辑
});

3. 处理地图事件

你可以为地图组件绑定事件处理函数，如标记点点击事件（markertap）或地图视野变化事件（regionchange）。

Page({  
  // ...  
  markertap: function(e) {  
    // 标记点被点击时触发的事件  
    console.log(e.markerId);  
  },  
  regionchange: function(e) {  
    // 地图视野变化时触发的事件  
    console.log(e.type);  
  },  
  // ... 其他页面逻辑  
});

4. 调用地图组件方法

如果需要，你还可以调用地图组件提供的方法来执行特定操作，如移动到当前位置。

// 假设在某个函数中  
wx.getLocation({  
  type: 'gcj02',  
  success: function(res) {  
    this.setData({  
      latitude: res.latitude,  
      longitude: res.longitude  
    });  
    const mapCtx = wx.createMapContext('myMap');  
    mapCtx.moveToLocation();  
  }  
});

5. 引入手绘地图

如需引入手绘地图，需要手绘图上传线上，引入线上图片,我这里是将图片裁剪四等分引入，方便加载渲染

  // 嵌入手绘地图
 
  addSketch() {
    let that = this;
    this.mapCtx = wx.createMapContext('map');
    var list = [{
      id: 1,
      src: "xxx/msxyBg2001.png",
      bounds: { // 图片覆盖的经纬度范围
        southwest: [],
        northeast: [] // 东北角
      }
    }, {
      id: 2,
     src: "xxx/msxyBg2001.png",
      bounds: { // 图片覆盖的经纬度范围
      southwest: [],
        northeast: [] // 东北角
      }
    }, {
      id: 3,
    src: "xxx/msxyBg2001.png",
      bounds: { // 图片覆盖的经纬度范围
       southwest: [],
        northeast: [] // 东北角
      }
    }, {
      id: 4,
     src: "xxx/msxyBg2001.png",
      bounds: { // 图片覆盖的经纬度范围
      southwest: [],
        northeast: [] // 东北角
      }
    }, ]


    list.map(item => {
      this.mapCtx.addGroundOverlay({
        id: item.id,
        src: item.src,
        bounds: { // 图片覆盖的经纬度范围
          southwest: { // 西南角
            latitude: item.bounds.southwest[0], //南北
            longitude: item.bounds.southwest[1] //东西
          },
          northeast: { // 东北角
            latitude: item.bounds.northeast[0],
            longitude: item.bounds.northeast[1]
          }
        },
      })
    })
  },