小程序-地图（2）

1circles在地图上显示圆
maps.wxml

   <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"   
    circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" 
   bindregionchange="regionchange" show-location style="width: 100%; height: 
   300px;"></map>

maps.js
放在data中

  circles: [{
            latitude: res.latitude,
            longitude: res.longitude,
            color: '#FF0000DD',
            fillColor: '#7cb5ec88',
            radius: 3000,
            strokeWidth: 1
          }]

屏幕快照 2018-05-30 下午9.50.14.png

2 marker 上的气泡 callout
maps.js
color和bgColor要用6位都颜色值

markers: [{
            id: "1",
            latitude: res.latitude,
            longitude: res.longitude,
            width: 50,
            height: 50,
            iconPath: "../assests/imgs/location.png",
            title: "earch",
            callout:{
              content:'我是气泡',
              color:'#7cb5ec88',
              fontSize:12,
              borderRadius:10,
              bgColor:'#FF0000DD',
            }
          }],

屏幕快照 2018-05-30 下午10.05.29.png

3 polyline
指定一系列坐标点，从数组第一项连线至最后一项
maps.js

data: {
 
    polyline: [{
      points: [{
        longitude: 116.481451,
        latitude: 40.22077
      }, {
        longitude: 116.497847,
        latitude: 40.22077
      }, {
        longitude: 116.506507,
        latitude: 40.22077
      }],
      color: "#7cb5ec88",
      width: 13,
      dottedLine: false,
      arrowLine:true
    }]
  },

maps.wxml

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

这个属性只能表示出直线型的

屏幕快照 2018-05-31 下午11.03.28.png