微信小程序地圖 map

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持，低版本需做兼容處理。

地圖（v2.7.0 起支持同層渲染）。相關(guān)api wx.createMapContext。

個(gè)性化地圖能力可在小程序后臺(tái)“開(kāi)發(fā)-開(kāi)發(fā)者工具-騰訊位置服務(wù)”申請(qǐng)開(kāi)通。 小程序內(nèi)地圖組件應(yīng)使用同一 subkey，可通過(guò) layer-style（地圖官網(wǎng)設(shè)置的樣式 style 編號(hào)）屬性選擇不同的底圖風(fēng)格。 組件屬性的長(zhǎng)度單位默認(rèn)為px，2.4.0起支持傳入單位(rpx/px)。

示例小程序

regionchange 返回值

視野改變時(shí)，regionchange 會(huì)觸發(fā)兩次，返回的 type 值分別為 begin / end。

2.8.0起 begin 階段返回 causedBy，有效值為 gesture（手勢(shì)觸發(fā)） & update（接口觸發(fā)）

2.3.0起 end 階段返回 causedBy，有效值為 drag（拖動(dòng)導(dǎo)致）、scale（縮放導(dǎo)致）、update（調(diào)用更新接口導(dǎo)致） rotate、skew僅在 end 階段返回

e = {
  causedBy,
  type,
  detail: {
    rotate,
    skew
  }
}

setting

提供 setting 對(duì)象統(tǒng)一設(shè)置地圖配置。同時(shí)對(duì)于一些動(dòng)畫屬性如 rotate 和 skew，通過(guò) setData 分開(kāi)設(shè)置時(shí)無(wú)法同時(shí)生效，需通過(guò) settting 統(tǒng)一修改。

// 默認(rèn)值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: -1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}

this.setData({
  // 僅設(shè)置的屬性會(huì)生效，其它的不受影響
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker

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

marker 上的氣泡 callout

marker 上的氣泡 label

polyline

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

polygon

指定一系列坐標(biāo)點(diǎn)，根據(jù) points 坐標(biāo)數(shù)據(jù)生成閉合多邊形

circle

在地圖上顯示圓

control

在地圖上顯示控件，控件不隨著地圖移動(dòng)。即將廢棄，請(qǐng)使用 cover-view

position

bindregionchange 返回值

Bug & Tip

1. tip：個(gè)性化地圖暫不支持工具中調(diào)試。請(qǐng)先使用微信客戶端進(jìn)行測(cè)試。
2. tip：地圖中的顏色值color/borderColor/bgColor等需使用6位（8位）十六進(jìn)制表示，8位時(shí)后兩位表示alpha值，如：#000000AA
3. tip：地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。
4. tip: map 組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用 wx.getLocation 接口需要指定 type 為 gcj02
5. tip：從 2.8.0 起 map 支持同層渲染，更多請(qǐng)參考原生組件使用限制
6. tip：請(qǐng)注意原生組件使用限制。

比例尺

示例代碼

在開(kāi)發(fā)者工具中預(yù)覽效果

<!-- 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.js
Page({
  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.detail.markerId)
  },
  controltap(e) {
    console.log(e.detail.controlId)
  }
})