支付寶小程序地圖組件 地圖·Map

該組件是地圖組件。同一個頁面需要展示多個 map 組件的話，需要使用不同的 ID 。map 組件是由客戶端創(chuàng)建的原生組件，原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法在原生組件之上。

相關(guān)API：my.createMapContext(mapId)

前提條件

• 支持高德地圖 style 與火星坐標系。
• 支持通過同層渲染實現(xiàn) cover-view 覆蓋 map 組件。同層渲染支持范圍 10.1.35 及其以上版本 Android 的小程序，10.1.50 及其以上版本 iOS 的小程序。
• 不支持在 scroll-view 中使用 map 組件。
• 不支持使用 CSS 動畫，CSS 動畫對 map 組件無效。
• 不支持小程序獲取當(dāng)前地圖的經(jīng)緯度。
• 縮小或者放大了地圖比例尺之后，若再次設(shè)置 data 經(jīng)緯度到一個地點，請在 onRegionChange 函數(shù)中重新設(shè)置 data 的 scale 值，否則會出現(xiàn)拖動地圖區(qū)域后，重新加載導(dǎo)致地圖比例尺又變回縮放前的大小，具體請參照示例代碼 regionchange 函數(shù)部分。
• 基礎(chǔ)庫 1.18.5 開始支持 optimize 屬性，開啟 optimize 后，開發(fā)者不需要再監(jiān)聽 onRegionChange 來更新 scale 屬性值以保證縮放比例不變。此特性在客戶端 10.1.68 以上支持，可通過 my.canIUse（map.optimize）進行檢測。

掃碼體驗

示例代碼

<view>
  <map id="map" longitude="120.131441" latitude="30.279383" scale="{{scale}}" controls="{{controls}}"
  onControlTap="controltap" markers="{{markers}}"
  onMarkerTap="markertap"
  polyline="{{polyline}}" 
  circles="{{circles}}"
  panels="{{panels}}"
  onRegionChange="regionchange"
  onTap="tap"
  onPanelTap="onPanelTap"
  show-location style="width: 100%; height: 300px;"
  include-points="{{includePoints}}"></map>
  <button onTap="changeScale">改scale</button>
  <button onTap="getCenterLocation">getCenterLocation</button>
  <button onTap="moveToLocation">moveToLocation</button>
  <button onTap="changeCenter">改center</button>
  <button onTap="changeMarkers">改markers</button>
</view>
Page({
  data: {
    scale: 14,
    longitude: 120.131441,
    latitude: 30.279383,
    markers: [{
      iconPath: "/image/green_tri.png",
      id: 10,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50
    },{
      iconPath: "/image/green_tri.png",
      id: 11,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50,
      customCallout: {
        type: 1,
        time: '1',
      },
      fixedPoint:{
        originX: 400,
        originY: 400,
      },
      iconAppendStr: '黃龍時代廣場黃龍時代廣場黃龍時代廣場黃龍時代廣場test'
    }],
    includePoints: [{
      latitude: 30.279383,
      longitude: 120.131441,
    }],
    polyline: [{
      points: [{
        longitude: 120.131441,
        latitude: 30.279383
      }, {
        longitude: 120.128821,
        latitude: 30.278200
      }, {
        longitude: 120.131618,
        latitude: 30.277600
      }, {
        longitude: 120.132520,
        latitude: 30.279393
      }, {
        longitude: 120.137517,
        latitude: 30.279383
      }],
      color: "#FF0000DD",
      width: 5,
      dottedLine: false
    }],
    circles: [{
      latitude: 30.279383,
      longitude: 120.131441,
      color: "#000000AA",
      fillColor: "#000000AA",
      radius: 80,
      strokeWidth: 5,
    }],
    controls: [{
      id: 5,
      iconPath: '../../resources/pic/2.jpg',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }],
    panels:[{
         id:6,
       // 布局參考 map 高級定制渲染
       layout: {
                params:{
                title:"標題欄",
                bgColor:"#DC143C"
                },
                src:"/layout/map_callout.xml"
         },
       position: {
         left: 0,
         bottom: 0,
         width: 200,
         height: 84
       },
    }],
  },

  
  onReady(e) {
    // 使用 my.createMapContext 獲取 map 上下文
    this.mapCtx = my.createMapContext('map')
  },

  
  getCenterLocation() {
    this.mapCtx.getCenterLocation(function (res) {
      console.log(res.longitude)
      console.log(res.latitude)
    })
  },

  
  moveToLocation() {
    this.mapCtx.moveToLocation()
  },

  
  regionchange(e) {
    console.log('regionchange', e);
    // 注意：如果縮小或者放大了地圖比例尺以后，請在 onRegionChange 函數(shù)中重新設(shè)置 data 的
    // scale 值，否則會出現(xiàn)拖動地圖區(qū)域后，重新加載導(dǎo)致地圖比例尺又變回縮放前的大小。
    if (e.type === 'end') {
      this.setData({
        scale: e.scale
      });
    }
  },

  
  markertap(e) {
    console.log('marker tap', e);
  },

  
  controltap(e) {
    console.log('control tap', e);
  },

  
  tap() {
    console.log('tap:');
  },
  onPanelTap(e) {
    console.log('paneltap:', e);
  },

  
  changeScale() {
    this.setData({
      scale: 8,
    });
  },

  
  changeCenter() {
    this.setData({
      longitude: 113.324520,
      latitude: 23.199994,
      includePoints: [{
        latitude: 23.199994,
        longitude: 113.324520,
      }],
    });
  },
  //支持地圖不接受手勢事件, isGestureEnable為1 表示支持，為0表示不支持
  gestureEnable() {
    this.mapCtx.gestureEnable({isGestureEnable:1});
  },
  //地圖是否顯示比例尺, showsScale 為1表示顯示，為0表示不顯示
  showsScale() {
    this.mapCtx.showsScale({isShowsScale:1});
  },
  //地圖是否顯示指南針, showsCompass 為1表示顯示，為0表示不顯示
  showsCompass() {
    this.mapCtx.showsCompass({isShowsCompass:1});
  },
  changeMarkers() {
    this.setData({
      markers: [{
        iconPath: "/image/green_tri.png",
        id: 10,
        latitude: 21.21229,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      includePoints: [{
        latitude: 21.21229,
        longitude: 113.324520,
      }],
    });
  },
})

屬性

markers

標記點，用于在地圖上顯示標記的位置。

注意：

• 可利用該參數(shù)顯示多個定位點。
• 地點標注不支持設(shè)置英文。

屬性	說明	類型	必填	備注	最低版本
id	標記點 id	Number	否	標記點 id，點擊事件回調(diào)會返回此 id。	-
latitude	緯度	Float	是	范圍 -90 ~ 90。	-
longitude	經(jīng)度	Float	是	范圍 -180 ~ 180。	-
title	標注點名	String	否	-	-
iconPath	顯示的圖標	String	是	項目目錄下的圖片路徑，不能用相對路徑只能用 / 開頭的絕對路徑。示例：/pages/image/test.jpg	-
iconLayout	Object	map 高級定制渲染繪制 marker 樣式	否	優(yōu)先級高于 iconPath, 對象參照 layout。	1.23.0
rotate	旋轉(zhuǎn)角度	Number	否	順時針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認為 0。	-
alpha	標注的透明度	Number	否	是否透明，默認為 1。	-
width	標注圖標寬度	Number	否	默認為圖片的實際寬度。	-
height	標注圖標高度	Number	否	默認為圖片的實際高度。	-
displayRanges	Array	標明在特定地圖縮放級別下展示	否	默認所有級別下都展示；指定只在特定級別范圍展示：[{  "from": 10,  "to": 15 }]	1.23.0
callout	自定義標記點上方的氣泡窗口	Object	否	marker 上的氣泡，地圖上最多同時展示一個，綁定 onCalloutTap。{    content:"xxx" }	-
anchorX	經(jīng)緯度在標注圖標的錨點-橫向值	Double	否	這兩個值需要成對出現(xiàn)，anchorX 表示橫向(0-1)，Y 表示豎向(0-1)，anchorX:0.5,anchorY:1表示底邊中點。	-
anchorY	經(jīng)緯度在標注圖標的錨點-豎向值	Double	否	-
customCallout	callout 背景自定義目前只支持高德地圖 style	Object	否	{ "type": 2, "descList": [{     "desc": "預(yù)計",   "descColor": "#333333" }, {     "desc": "5分鐘",  "descColor": "#108EE9" }, {     "desc": "到達",   "descColor": "#333333" }], "isShow": 1 }	-
iconAppendStr	marker 圖片可以來源于 View	String	否	和 iconPath 一起使用，會將 iconPath 對應(yīng)的圖片及該字符串共同生成一個圖片，當(dāng)成 marker 的圖標。	-
iconAppendStrColor	marker 圖片可以來源于 View，底部描述文本顏色	String	否	默認是：#33B276。	-
fixedPoint	基于屏幕位置扎點	Object	否	基于屏幕位置扎點。{    //距離地圖左上角的像素數(shù),Number    originX:100,     originY:100   }	-
markerLevel	marker 在地圖上的繪制層級	Number	否	與地圖上其他覆蓋物統(tǒng)一的 Z 坐標系。	1.10.0
label	marker 上的氣泡	Object	否	marker 上的氣泡，地圖上可同時展示多個，綁定 onMarkerTap。{    content:"Hello Label",    color:"#000000",    fontSize:12,    borderRadius:"3",    bgColor:"#ffffff",    padding:5, }	1.12.0
style	自定義 marker 樣式	Object	否	自定義 marker 的樣式和內(nèi)容。	1.11.0

polygon

用于構(gòu)造多邊形對象。

polyline

用于指定一系列坐標點，從數(shù)組第一項連線至最后一項。

circles

用于在地圖上顯示圓。

controls

用于在地圖上顯示控件，控件不隨著地圖移動。

position

控件在地圖的位置，以及控件的大小。

callout

自定義標記點上方的氣泡窗口。

customCallout

自定義 callout 背景。

屬性名	說明	類型	必填	備注
type	樣式類型	Number	是	0 為黑色 style，1 為白色 style，2 為背景+文本，見下圖。
time	時間	String	是	時間值。
descList	描述數(shù)組	Array	是	描述數(shù)組。{     "type": 0,    "time": "3",    "descList": [{         "desc": "點擊立即打車",        "descColor": "#ffffff"     }],    "isShow": 1  }
layout	使用 map 高級定制渲染	Object	否	優(yōu)先級最高, layout 對象參照 layout 定義

fixedPoint

基于屏幕位置的扎點。

地圖組件的經(jīng)緯度是必需設(shè)置的, 若未設(shè)置經(jīng)緯度，則默認是北京的經(jīng)緯度。

Marker 圖鑒

Marker 樣式優(yōu)先級說明

• customCallout，callout 與 label 互斥，優(yōu)先級排序為：label > customCallout > callout 。
• style 與 icon 互斥，優(yōu)先級排序為：style > iconAppendStr；style > icon` 。

style

結(jié)構(gòu)	圖片示例	最低版本
{    type:1,    text1:"Style1",    icon1:'xxx',    icon2:'xxx' }		1.11.0
{    type:2,    text1:"Style2",    icon1:'xxx',    icon2:'xxx' }		1.12.0
{    type:3,    icon:xxx,  //選填    text:xxx,  //必填    color:xxx,  //默認#33B276    bgColor:xxx,  //默認#FFFFFF      gravity:"left/center/right", //默認 center    fontType:"small/standard/large"  //默認standard }		1.13.0

customCallout

結(jié)構(gòu)	圖片示例	最低版本
{     "type": 0,    "time": "3",    "descList": [{         "desc": "點擊立即打車",        "descColor": "#ffffff"     }],    "isShow": 1  }		1.10.0
{     "type": 1,    "time": "3",    "descList": [{         "desc": "點擊立即打車",        "descColor": "#333333"     }],    "isShow": 1  }	-	1.10.0
{ "type": 2, "descList": [{  "desc": "預(yù)計",   "descColor": "#333333" }, {     "desc": "5分鐘",  "descColor": "#108EE9" }, {     "desc": "到達",   "descColor": "#333333" }], "isShow": 1 }		1.10.0

label

結(jié)構(gòu)	圖鑒	最低版本
{ content:"Hello Label", color:"#000000", fontSize:16, borderRadius:"5", bgColor:"#ffffff", padding:12, }		10.1.38

錯誤碼

錯誤碼信息請參見：

• Andriod 地圖錯誤碼對照表
• iOS 地圖錯誤碼對照

常見問題

map 組件如何跳轉(zhuǎn)到高德的 app 中去進行導(dǎo)航？

可使用 my.openLocation。

map 組件 optimize 屬性設(shè)置了 true 后如何獲取 scale 值？

optimize 屬性設(shè)置了 true 后，如果需要獲取 scale 值，必須要使用 onRegionChange。

map組件是否支持海外功能？

目前不支持。

如何手動在地圖上繪制多邊形區(qū)域？

可以使用 polygon 進行繪制。

iconAppendStr 里的文字能不能換行？

不支持。

地圖組件里，設(shè)置了路徑之后， 如何更改起點終點的 icon？

目前不支持更改。