小程序-地圖(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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容