微信小程序的map怎么用

今天小編給大家分享一下微信小程序的map怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

微信小程序map

地圖。

注意: covers 屬性即將移除，請(qǐng)使用 markers 替代

markers

標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置

marker 上的氣泡 callout

polyline

指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)

circles

在地圖上顯示圓

controls

在地圖上顯示控件，控件不隨著地圖移動(dòng)

position

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。

示例：

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

// map.jsPage({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50}],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229  }, {
        longitude: 113.324520,
        latitude: 23.21229  }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true}],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50  },
      clickable: true}]
  },
  regionchange(e) {console.log(e.type)
  },
  markertap(e) {console.log(e.markerId)
  },
  controltap(e) {console.log(e.controlId)
  }
})

Bug & Tip

1. tip:map組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的。

2. tip: 請(qǐng)勿在scroll-view中使用map組件。

3. tip:css動(dòng)畫對(duì)map組件無(wú)效。

4. tip:map組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用wx.getLocation接口需要指定type為gcj02

以上就是“微信小程序的map怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。