本文将带你了解微信小程序开发之之地图功能（map），希望本文对大家学微信有所帮助。

主要介绍微信小程序中的地图模块相关功能。基本使用地图组件使用起来也很简单。.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 style="width:   100%; height: 350px;">
    </map>1212参数列表及说明如下：除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。markersdata: {
    //
    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}}"   style="width: 100%; height: 350px;" ...//省略代码>
    </map> 1212效果如下：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}}" style="width: 100%; height:   350px;">11circles
    data: {
        //
    circles: [{
      latitude: '40.007153',
      longitude: '116.491081',
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
    ... //省略代码
    }
        

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！