微信小程序開發(fā)如何實現(xiàn)地圖功能

這篇文章主要講解了“微信小程序開發(fā)如何實現(xiàn)地圖功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序開發(fā)如何實現(xià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
    }],
    ... //省略代碼
    }

感謝各位的閱讀，以上就是“微信小程序開發(fā)如何實現(xiàn)地圖功能”的內容了，經(jīng)過本文的學習后，相信大家對微信小程序開發(fā)如何實現(xiàn)地圖功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！