微信小程序開發如何實現地圖功能

這篇文章主要講解了“微信小程序開發如何實現地圖功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序開發如何實現地圖功能”吧！

基本使用

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

.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
    }],
    ... //省略代碼
    }

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