小程序引入地圖及手繪地圖

發(fā)布時(shí)間：2024-06-28 熱度：

小程序中map標(biāo)簽的使用方法主要涉及到在WXML文件中引入地圖組件、在JS文件中設(shè)置地圖的相關(guān)參數(shù)以及事件處理，下面我將分步驟詳細(xì)說(shuō)明：

1. 引入地圖組件

首先，你需要在小程序的WXML文件中引入地圖組件。這通常通過(guò)在小程序的JSON文件中聲明，或者在WXML文件中直接使用組件標(biāo)簽來(lái)完成。

在WXML文件中直接使用：

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

2. 設(shè)置地圖參數(shù)

在JS文件中，你需要設(shè)置地圖的初始參數(shù)，如經(jīng)緯度、縮放級(jí)別、標(biāo)記點(diǎn)等。

Page({  
  data: {  
    latitude: 23.10229, // 初始緯度  
    longitude: 113.334521, // 初始經(jīng)度  
    scale: 16, // 初始縮放級(jí)別  
    markers: [ // 標(biāo)記點(diǎn)數(shù)組  
      {  
        id: 1,  
        longitude: 113.324520,  
        latitude: 23.099994,  
        name: 'T.I.T 創(chuàng)意園'  
      },  
      // 可以添加更多標(biāo)記點(diǎn)  
    ],  
    // 如有需要，可以添加controls等其他屬性  
  },  
  // ... 其他頁(yè)面邏輯  
});

3. 處理地圖事件

你可以為地圖組件綁定事件處理函數(shù)，如標(biāo)記點(diǎn)點(diǎn)擊事件（markertap）或地圖視野變化事件（regionchange）。

Page({  
  // ...  
  markertap: function(e) {  
    // 標(biāo)記點(diǎn)被點(diǎn)擊時(shí)觸發(fā)的事件  
    console.log(e.markerId);  
  },  
  regionchange: function(e) {  
    // 地圖視野變化時(shí)觸發(fā)的事件  
    console.log(e.type);  
  },  
  // ... 其他頁(yè)面邏輯  
});

4. 調(diào)用地圖組件方法

如果需要，你還可以調(diào)用地圖組件提供的方法來(lái)執(zhí)行特定操作，如移動(dòng)到當(dāng)前位置。

// 假設(shè)在某個(gè)函數(shù)中  
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: { // 圖片覆蓋的經(jīng)緯度范圍
        southwest: [],
        northeast: [] // 東北角
      }
    }, {
      id: 2,
     src: "xxx/msxyBg2001.png",
      bounds: { // 圖片覆蓋的經(jīng)緯度范圍
      southwest: [],
        northeast: [] // 東北角
      }
    }, {
      id: 3,
    src: "xxx/msxyBg2001.png",
      bounds: { // 圖片覆蓋的經(jīng)緯度范圍
       southwest: [],
        northeast: [] // 東北角
      }
    }, {
      id: 4,
     src: "xxx/msxyBg2001.png",
      bounds: { // 圖片覆蓋的經(jīng)緯度范圍
      southwest: [],
        northeast: [] // 東北角
      }
    }, ]


    list.map(item => {
      this.mapCtx.addGroundOverlay({
        id: item.id,
        src: item.src,
        bounds: { // 圖片覆蓋的經(jīng)緯度范圍
          southwest: { // 西南角
            latitude: item.bounds.southwest[0], //南北
            longitude: item.bounds.southwest[1] //東西
          },
          northeast: { // 東北角
            latitude: item.bounds.northeast[0],
            longitude: item.bounds.northeast[1]
          }
        },
      })
    })
  },