微信小程序開發(fā)實(shí)戰(zhàn)（18）：地圖組件

發(fā)表時(shí)間：2021-1-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：53

在小程序中可以使用標(biāo)簽嵌入地圖，那么可能很多同學(xué)會問，嵌入的是哪家的地圖呢？這還用問，自然是騰訊的地圖了，而且不能換成其他的地圖（百度、高德等）。

我們先來了解一下標(biāo)簽的常用屬性。

longitude：經(jīng)度
latitude：緯度
scale：縮放級別，默認(rèn)值時(shí)16，取值范圍是5到18
controls：在地圖上放置的控件數(shù)組
markers：在地圖上放置的標(biāo)記點(diǎn)數(shù)組
show-location：顯示帶有方向的當(dāng)前定位點(diǎn)
bindcontroltap：點(diǎn)擊控件時(shí)觸發(fā)的事件
bindmarkertap：點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)的事件
bindregionchange：視野發(fā)生變化時(shí)觸發(fā)的事件

下面的布局文件中放置了一個(gè) 標(biāo)簽，并設(shè)置了上述的屬性。

<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{{controls}}"
bindcontroltap="controltap" markers="{{markers}}"
bindmarkertap="markertap" polyline="{{polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>

顯示的效果如圖 1 所示。

圖1顯示騰訊地圖

在地圖上，顯示了一個(gè)標(biāo)記（笑臉圖像）和一個(gè)控件圖像（藍(lán)精靈圖像）?？赡芎芏嗤瑢W(xué)會問，標(biāo)記和控件到底有什么區(qū)別呢？不都可以放置圖像嗎？實(shí)際上，標(biāo)記和控件是基本相同的，主要區(qū)別只有一點(diǎn)，標(biāo)記會隨著地圖移動，而控件不會隨著地圖移動。

在標(biāo)簽中，大多數(shù)屬性都使用了變量，這些變量和相應(yīng)方法的代碼如下：

Page({
  data: {
    markers: [{
      iconPath: "/image/face.png",   //  標(biāo)記圖像
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{                     //  在地圖上通過經(jīng)緯度繪制折線
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF00FF",
      width: 5,
      dottedLine: false
    }],
    controls: [{
      id: 1,
      iconPath: '/image/sprite.png',   //  控件圖像
      position: {
        left: 0,
        top: 260 - 80,
        width: 80,
        height: 80
      },
      clickable: true                 //  設(shè)為控件可單擊的狀態(tài)
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

我們看到，在這段代碼中，有三個(gè)數(shù)組： markers 、 polyline 和 controls 。這三個(gè)數(shù)組都通過對象定義了多個(gè)屬性。其中 markers 和 controls 數(shù)組中屬性類似，前者每個(gè)數(shù)組元素表示一個(gè)標(biāo)記，后者一個(gè)數(shù)組元素表示一個(gè)控件。 ployline 中每個(gè)數(shù)組元素表示一條折線（通過經(jīng)緯度確定折線中的每個(gè)點(diǎn)）。這些折線（本例只是一條直線），從笑臉標(biāo)記頭頂中心部位向上延伸。

點(diǎn)擊控件和標(biāo)記都可以點(diǎn)擊，點(diǎn)擊后， Console 中輸出的日志信息如圖 2 所示。在日志信息中分別輸出了在 markers 和 controls 數(shù)組中定義的 id 屬性值。