微信小程序開發(fā)之地圖功能實戰(zhàn)教程

微信小程序之地圖功能（map）實戰(zhàn)教程。本文主要介紹微信小程序中的地圖模塊相關(guān)功能。

基本使用

地圖組件使用起來也很簡單。

.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location >
</map>

除了顯示基本地圖，還可以在地圖上添加markers–標注，polyline–折線，circles–圓形，controls–控件。

markers

data: {
    //
    markers: [{
      iconPath: "../../img/marker_red.png",
      id: 0,
      latitude: 40.002607,
      longitude: 116.487847,
      width: 35,
      height: 45
    }],
    ... //省略代碼
    }

在data中定義markers變量來表示覆蓋物

然后map控件引入即可：

<map id="map" longitude="{{longitude}}"  markers="{{markers}}"  ...//省略代碼>
</map> 

polyline

data: {
    //
    polyline: [{
      points: [{
        longitude: '116.481451',
        latitude: '40.006822'
      }, {
        longitude: '116.487847',
        latitude: '40.002607'
      }, {
        longitude: '116.496507',
        latitude: '40.006103'
      }],
      color: "#FF0000DD",
      width: 3,
      dottedLine: true
    }],
    ... //省略代碼
    }
?<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" >

circles

data: {
    //
    circles: [{
      latitude: '40.007153',
      longitude: '116.491081',
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
    ... //省略代碼
    }