新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：map地圖

map 地圖
- 屬性說(shuō)明
- 示例
  - 代碼示例 1
  - 代碼示例 2：原生組件設(shè)置 border 無(wú)效，也不可用 cover-view 覆蓋為圓角
- marker
  - 屬性說(shuō)明
  - 示例
- polyline
  - 屬性說(shuō)明
  - 示例
- polygon
  - 屬性說(shuō)明
  - 示例
- circle
  - 屬性說(shuō)明
  - 示例
- control
  - 屬性說(shuō)明
  - 示例
- Bug & Tip

map 地圖

解釋：地圖。客戶端創(chuàng)建的原生組件，使用時(shí)請(qǐng)注意相關(guān)限制。

創(chuàng)新互聯(lián)主營(yíng)依安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),依安h5小程序定制開發(fā)搭建,依安網(wǎng)站營(yíng)銷推廣歡迎依安等地區(qū)企業(yè)咨詢

屬性說(shuō)明

屬性名	類型	默認(rèn)值	必填	說(shuō)明	最低版本	Web 態(tài)說(shuō)明
longitude	Number	北京經(jīng)度	是	gcj02 坐標(biāo)系中心經(jīng)度	-	-
latitude	Number	北京緯度	是	gcj02 坐標(biāo)系中心緯度	-	-
scale	Number	16	否	縮放級(jí)別，取值范圍為 4-21 。動(dòng)態(tài)設(shè)置 scale 值用法：`scale=”{= scale =}”`	-	-
markers	Array.		否	標(biāo)記點(diǎn)。詳情請(qǐng)參考 marker	-	-
polyline	Array.		否	路線。詳情請(qǐng)參考 polyline	-	-
polygons	Array.		否	多邊形（工具暫不支持）。詳情請(qǐng)參考 polygon	2.0.13 低版本請(qǐng)做兼容性處理	-
circles	Array.		否	圓。詳情請(qǐng)參考 circle	-	-
controls	Array.		否	控件。詳情請(qǐng)參考 control	-	-
include-points	Array.		否	縮放視野以包含所有給定的坐標(biāo)點(diǎn)	-	-
show-location	Boolean	false	否	顯示帶有方向的當(dāng)前定位點(diǎn)	-	暫時(shí)不能顯示方向
enable-3D	Boolean	false	否	顯示 3D 樓塊（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	暫不支持
show-compass	Boolean	false	否	顯示指南針（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	暫不支持
enable-overlooking	Boolean	false	否	開啟俯視（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	暫不支持
enable-zoom	Boolean	true	否	是否支持縮放（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	-
enable-scroll	Boolean	true	否	是否支持拖動(dòng)（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	-
enable-rotate	Boolean	false	否	是否支持旋轉(zhuǎn)（工具暫不支持）	2.0.13 低版本請(qǐng)做兼容性處理	暫不支持
bindmarkertap	EventHandle		否	點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)	-	-
bindcallouttap	EventHandle		否	點(diǎn)擊標(biāo)記點(diǎn)對(duì)應(yīng)的氣泡時(shí)觸發(fā)	-	-
bindcontroltap	EventHandle		否	點(diǎn)擊控件時(shí)觸發(fā)	-	-
bindregionchange	EventHandle		否	視野發(fā)生變化時(shí)觸發(fā)	-	-
bindtap	EventHandle		否	點(diǎn)擊地圖時(shí)觸發(fā)	-	-
bindupdated	EventHandle		否	在地圖渲染更新完成時(shí)觸發(fā)	-	-
bindpoitap	EventHandle		否	點(diǎn)擊地圖 poi 點(diǎn)時(shí)觸發(fā)	-	暫不支持

示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1

SWAN
JS

 
 
 
  
  
  
  
  
   
  
  
   

  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   scale="{{scale}}"
  
  
   markers="{{markers}}"
  
  
   polyline="{{polyline}}"
  
  
   polygons="{{drawPolygon ? polygons : []}}"
  
  
   circles="{{circles}}"
  
  
   controls="{{controls}}"
  
  
   show-location="{{showLocation}}"
  
  
   include-points="{{includePoints}}"
  
  
   enable-3D="{{enable3d}}"
  
  
   show-compass="{{showCompass}}"
  
  
   enable-overlooking="{{enableOverlooking}}"
  
  
   enable-zoom="{{enableZoom}}"
  
  
   enable-scroll="{{enableScroll}}"
  
  
   enable-rotate="{{enableRotate}}"
  
  
   bindmarkertap="onMarkertap"
  
  
   bindcallouttap="onCallouttap"
  
  
   bindcontroltap="onControltap"
  
  
   bindregionchange="onRegionchange"
  
  
   bindtap="onTap" 
  
  
   bindupdated="onUpdated"
  
  
   bindpoitap="onPoitap">
  
  
   
  
  
   
  
  
   支持縮放
  
  
   
  
  
   
  
  
   
  
  
   支持拖動(dòng)
  
  
   
  
  
   
  
  
   
  
  
   支持旋轉(zhuǎn)
  
  
   
  
  
   
  
  
   
  
  
   工具暫不支持手勢(shì)控制


 
 
 
  
  
  Page({
  
  
   data: {
  
  
   latitude: '40.048828',
  
  
   longitude: '116.280412',
  
  
   scale: 16,
  
  
   isWeb: false,
  
  
   polygons: [],
  
  
   drawPolygon: false,
  
  
   includePoints: [],
  
  
   showLocation: false,
  
  
   enable3d: false,
  
  
   showCompass: false,
  
  
   enableOverlooking: false,
  
  
   enableZoom: true,
  
  
   enableScroll: true,
  
  
   enableRotate: true,
  
  
   markers: [{
  
  
   markerId: '1',
  
  
   latitude: '40.052751',
  
  
   longitude: '116.278796'
  
  
   }, {
  
  
   markerId: '2',
  
  
   latitude: '40.048828',
  
  
   longitude: '116.280412',
  
  
   title: 'markerId: 2',
  
  
   zIndex: 100,
  
  
   iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/demo_location.png',
  
  
   rotate: 0,
  
  
   width: 30,
  
  
   height: 50,
  
  
   callout: {
  
  
   display: 'ALWAYS',
  
  
   content: '百度科技園',
  
  
   color: '#000',
  
  
   fontSize: '16',
  
  
   borderRadius: 50,
  
  
   bgColor: '#5B9FFF',
  
  
   padding: 2,
  
  
   textAlign: 'center'
  
  
   }
  
  
   }, {
  
  
   markerId: '3',
  
  
   latitude: '40.049655',
  
  
   longitude: '116.27505',
  
  
   callout: {
  
  
   display: 'ALWAYS',
  
  
   content: '西山壹號(hào)院'
  
  
   }
  
  
   }],
  
  
   polyline: [{
  
  
   points: [{
  
  
   longitude: 116.278796,
  
  
   latitude: 40.048828
  
  
   }, {
  
  
   longitude: 116.27505,
  
  
   latitude: 40.049655
  
  
   }],
  
  
   color: '#FF5F41FF',
  
  
   width: 2,
  
  
   dottedLine: true
  
  
   }],
  
  
   controls: [{
  
  
   controlId: 1,
  
  
   iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png',
  
  
   position: {
  
  
   left: 0,
  
  
   top: 100,
  
  
   width: 50,
  
  
   height: 50
  
  
   },
  
  
   clickable: true
  
  
   }],
  
  
   circles: [{
  
  
   latitude: '40.052751',
  
  
   longitude: '116.278796',
  
  
   color: '#FF5F41FF',
  
  
   fillColor: '#21FFFFFF',
  
  
   radius: '200',
  
  
   strokeWidth: '2'
  
  
   }]
  
  
   },
  
  
   showLocation() {
  
  
   this.setData({
  
  
   showLocation: !this.data.showLocation
  
  
   });
  
  
   },
  
  
   toggle3d() {
  
  
   this.setData({
  
  
   enable3d: !this.data.enable3d
  
  
   });
  
  
   },
  
  
   toggleShowCompass() {
  
  
   this.setData({
  
  
   showCompass: !this.data.showCompass
  
  
   });
  
  
   },
  
  
   toggleOverlooking() {
  
  
   this.setData({
  
  
   enableOverlooking: !this.data.enableOverlooking
  
  
   });
  
  
   },
  
  
   toggleZoom() {
  
  
   this.setData({
  
  
   enableZoom: !this.data.enableZoom
  
  
   });
  
  
   },
  
  
   toggleScroll() {
  
  
   this.setData({
  
  
   enableScroll: !this.data.enableScroll
  
  
   });
  
  
   },
  
  
   toggleRotate() {
  
  
   this.setData({
  
  
   enableRotate: !this.data.enableRotate
  
  
   });
  
  
   },
  
  
   togglePolygon() {
  
  
   this.setData({
  
  
   drawPolygon: !this.data.drawPolygon
  
  
   });
  
  
   },
  
  
   onMarkertap(e) {
  
  
   console.log('onMarkertap callback:', e);
  
  
   },
  
  
   onCallouttap(e) {
  
  
   console.log('onCallouttap callback:', e);
  
  
   },
  
  
   onControltap(e) {
  
  
   console.log('onControltap callback:', e);
  
  
   },
  
  
   onRegionchange(e) {
  
  
   console.log('onRegionchange callback:', e);
  
  
   },
  
  
   onTap(e) {
  
  
   console.log('onTap callback:', e);
  
  
   },
  
  
   onUpdated(e) {
  
  
   console.log('onUpdated callback:', e);
  
  
   },
  
  
   onPoitap(e) {
  
  
   console.log('onPoitap callback:', e);
  
  
   },
  
  
  
  
  
   /**
  
  
   * 點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)的事件
  
  
   */ 
  
  
   bindmarkertap() {
  
  
   swan.showToast({
  
  
   title: '點(diǎn)擊標(biāo)記啦',
  
  
   icon: 'none'
  
  
   });
  
  
   },
  
  
  });
 
 
 
代碼示例 2：原生組件設(shè)置 border 無(wú)效，也不可用 cover-view 覆蓋為圓角
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
CSS

 
 
 
  
  
  
  
  
   
  
  
   

  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}">
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  .card-area { 
  
  
   width: 3.88rem;
  
  
   height: 2.18rem;
  
  
  }
 
 
 
marker
解釋：標(biāo)記點(diǎn)，用于在地圖上顯示標(biāo)記的位置。
屬性說(shuō)明


屬性名
說(shuō)明
類型
必填
備注


markerId 標(biāo)記點(diǎn) id Number 否 marker 點(diǎn)擊事件回調(diào)會(huì)返回此 id 。建議為每個(gè) marker 設(shè)置 Number 類型的 id ，保證更新 marker 時(shí)有更好的性能
latitude 緯度 Number 是 浮點(diǎn)數(shù)，范圍 -90~90
longitude 經(jīng)度 Number 是 浮點(diǎn)數(shù)，范圍 -180~180
zIndex 顯示層級(jí) Number 否 iOS 地圖不支持設(shè)置此屬性
iconPath 顯示的圖標(biāo) String 是 項(xiàng)目目錄下的圖片路徑，支持網(wǎng)絡(luò)路徑、本地路徑（相對(duì)和絕對(duì)路徑寫法），工具暫不支持絕對(duì)路徑寫法
rotate 旋轉(zhuǎn)角度 Number 否 默認(rèn)為 0 ，順時(shí)針旋轉(zhuǎn)的角度，范圍 0~360
alpha 標(biāo)注的透明度 Number 否 默認(rèn)為 1 ，無(wú)透明，范圍 0~1
width 標(biāo)注圖標(biāo)寬度 Number 否 默認(rèn)為圖片實(shí)際寬度
height 標(biāo)注圖標(biāo)高度 Number 否 默認(rèn)為圖片實(shí)際高度
callout 自定義標(biāo)記點(diǎn)上方的氣泡窗口 Object 否 支持的屬性見下表，可識(shí)別換行符
label 為標(biāo)記點(diǎn)旁邊增加標(biāo)簽。暫不支持換行 Object 否 支持的屬性見下表，可識(shí)別換行符
anchor 經(jīng)緯度在標(biāo)注圖標(biāo)的錨點(diǎn) Object 否 默認(rèn)底邊中點(diǎn)，{x, y}：x 表示橫向（0-1），y 表示豎向（0-1）。{x: .5, y: 1}表示底邊中點(diǎn)
callout 屬性說(shuō)明 


屬性名
說(shuō)明
類型
備注


content 文本 String 
color 文本顏色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fontSize 文字大小 Number 
borderWidth 邊框?qū)挾?/td> Number 
borderColor 邊框顏色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderRadius callout 邊框圓角 Number 
bgColor 背景色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
padding 文本邊緣留白 Number 
display ‘BYCLICK’：點(diǎn)擊顯示；’ALWAYS’：常顯 String 默認(rèn)為常顯
textAlign 文本對(duì)齊方式。有效值：left、right、center String 默認(rèn)為居中對(duì)齊
label 屬性說(shuō)明 


屬性名
說(shuō)明
類型
備注


content 文本 String 
color 文本顏色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fontSize 文字大小 Number 
x label 的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度 Number 
y label 的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度 Number 
borderWidth 邊框?qū)挾?/td> Number 
borderColor 邊框顏色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderRadius 邊框圓角 Number 
bgColor 背景色 String 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
padding 文本邊緣留白 Number 
textAlign 文本對(duì)齊方式。有效值：left、right、center String 默認(rèn)為居中對(duì)齊
示例
圖片示例
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   style="width: 100%; height: 300px;"
  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   markers="{{markers}}"
  
  
   bindmarkertap="bindmarkertap"
  
  
   bindcallouttap="bindcallouttap">
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   markers: [{
  
  
   markerId: 1,
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   title: 'markerId: 1',
  
  
   zIndex: 100,
  
  
   iconPath: '../images/location.png',
  
  
   rotate: 90,
  
  
   callout: {
  
  
   display: 'ALWAYS',
  
  
   content: '百度科技園',
  
  
   color: '#000',
  
  
   fontSize: '16',
  
  
   borderRadius: 50,
  
  
   bgColor: '#5B9FFF',
  
  
   padding: 2,
  
  
   textAlign: 'center'
  
  
   }
  
  
   }, {
  
  
   markerId: 2,
  
  
   latitude: 40.049655,
  
  
   longitude: 116.27505,
  
  
   title: 'markerId: 2',
  
  
   zIndex: 100,
  
  
   rotate: 90,
  
  
   alpha: 0.5,
  
  
   width: 30,
  
  
   height: 50,
  
  
   label: {
  
  
   'content': 'label',
  
  
   'color': '#7B68EE',
  
  
   'fontSize': 16,
  
  
   'borderWidth': 1,
  
  
   'borderColor': '#5B9FFF',
  
  
   'borderRadius': 50,
  
  
   'bgColor': '#ADCFFF',
  
  
   'padding': 5,
  
  
   'textAlign': 'center'
  
  
   },
  
  
   anchor: {x: .5, y: 1},
  
  
   callout: {
  
  
   display: 'BYCLICK',
  
  
   content: '西山壹號(hào)院',
  
  
   color: '#FFF',
  
  
   fontSize: '16',
  
  
   borderRadius: 50,
  
  
   bgColor: '#5B9FFF',
  
  
   padding: 2,
  
  
   textAlign: 'center'
  
  
   }
  
  
   }]
  
  
   },
  
  
   bindmarkertap() {
  
  
   swan.showToast({
  
  
   title: '點(diǎn)擊標(biāo)記啦',
  
  
   icon: 'none'
  
  
   });
  
  
   },
  
  
   bindcallouttap() {
  
  
   swan.showToast({
  
  
   title: '點(diǎn)擊標(biāo)記上方氣泡啦',
  
  
   icon: 'none'
  
  
   });
  
  
   }
  
  
  });
 
 
 
polyline
解釋：指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)。
屬性說(shuō)明


屬性名
說(shuō)明
類型
必填
備注


points 經(jīng)緯度數(shù)組 Array 是 [{latitude: 0, longitude: 0}]
color 線的顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
width 線的寬度 Number 否 
dottedLine 是否虛線 Boolean 否 默認(rèn) false
arrowLine 帶箭頭的線 Boolean 否 默認(rèn) false
arrowIconPath 更換箭頭圖標(biāo) String 否 在 arrowLine 為 true 時(shí)生效
borderColor 線的邊框顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderWidth 線的厚度 Number 否 
示例
圖片示例
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   style="width: 100%; height: 300px;"
  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   polyline="{{polyline}}">
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   polyline: [{
  
  
   points: [{
  
  
   longitude: 116.278796,
  
  
   latitude: 40.048828
  
  
   }, {
  
  
   longitude: 116.27505,
  
  
   latitude: 40.049655
  
  
   }],
  
  
   color: '#000000AA',
  
  
   width: 2,
  
  
   dottedLine: true,
  
  
   arrowLine: true,
  
  
   // arrowIconPath: '開發(fā)者服務(wù)器圖片路徑',
  
  
   borderColor: '#FFB6C1',
  
  
   borderWidth: 5
  
  
   }]
  
  
   }
  
  
  });
 
 
 
polygon
解釋：指定一系列坐標(biāo)點(diǎn)，根據(jù) points 坐標(biāo)數(shù)據(jù)生成閉合多邊形。
屬性說(shuō)明


屬性名
說(shuō)明
類型
必填
備注


points 經(jīng)緯度數(shù)組 Array 是 [{latitude: 0, longitude: 0}]
strokeWidth 描邊的寬度 Number 否 
strokeColor 描邊的顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fillColor 填充顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
zIndex 設(shè)置多邊形 Z 軸數(shù)值 Number 否 
示例
圖片示例
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   style="width: 100%; height: 300px;"
  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   polygons="{{polygons}}">
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   polygons: [{
  
  
   points: [{
  
  
   longitude: 116.278796,
  
  
   latitude: 40.048828
  
  
   }, {
  
  
   longitude: 116.27505,
  
  
   latitude: 40.049655
  
  
   },{
  
  
   longitude: 116.27305,
  
  
   latitude: 40.050655
  
  
   },{
  
  
   longitude: 116.27105,
  
  
   latitude: 40.051655
  
  
   }],
  
  
   strokeWidth: 1,
  
  
   strokeColor: '#000000AA',
  
  
   fillColor: '#000000AA',
  
  
   zIndex: 20
  
  
   }]
  
  
   }
  
  
  });
 
 
 
circle
解釋：在地圖上顯示圓
屬性說(shuō)明


屬性名
說(shuō)明
類型
必填
備注


latitude 緯度 Number 是 浮點(diǎn)數(shù)，范圍 -90~90
longitude 經(jīng)度 Number 是 浮點(diǎn)數(shù)，范圍 -180~180
color 描邊的顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fillColor 填充顏色 String 否 8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
radius 半徑 Number 是 
strokeWidth 描邊的寬度 Number 否 
示例
圖片示例
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   style="width: 100%; height: 300px;"
  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   circles="{{circles}}">
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   scale: 16,
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   circles: [{
  
  
   latitude: 40.052751,
  
  
   longitude: 116.278796,
  
  
   color: '#FF5F41FF',
  
  
   fillColor: '#FF5F41FF',
  
  
   radius: 200,
  
  
   strokeWidth: 2
  
  
   }]
  
  
   }
  
  
  });
 
 
 
control
解釋：在地圖上顯示控件，控件不隨著地圖移動(dòng)。
屬性說(shuō)明


屬性名
說(shuō)明
類型
必填
備注


controlId 控件 id Number 否 在控件點(diǎn)擊事件回調(diào)會(huì)返回此 id
position 控件在地圖的位置 Object 是 控件相對(duì)地圖位置
iconPath 顯示的圖標(biāo) String 是 項(xiàng)目目錄下的圖片路徑，支持網(wǎng)絡(luò)路徑、本地路徑（相對(duì)和絕對(duì)路徑寫法），工具暫不支持絕對(duì)路徑寫法
clickable 是否可點(diǎn)擊 Boolean 否 默認(rèn)不可點(diǎn)擊
position 屬性說(shuō)明 


屬性名
說(shuō)明
類型
必填
備注


left 距離地圖的左邊界多遠(yuǎn) Number 否 默認(rèn)為 0
top 距離地圖的上邊界多遠(yuǎn) Number 否 默認(rèn)為 0
width 控件寬度 Number 否 默認(rèn)為圖片寬度
height 控件高度 Number 否 默認(rèn)為圖片高度
示例
圖片示例
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   style="width: 100%; height: 300px;"
  
  
   longitude="{{longitude}}"
  
  
   latitude="{{latitude}}"
  
  
   controls="{{controls}}"
  
  
   bindcontroltap="bindcontroltap"
  
  
   >
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   latitude: 40.048828,
  
  
   longitude: 116.280412,
  
  
   controls: [{
  
  
   controlId: 1,
  
  
   iconPath: '/images/navigate.png',
  
  
   position: {
  
  
   left: 0,
  
  
   top: 100,
  
  
   width: 50,
  
  
   height: 50
  
  
   },
  
  
   clickable: true
  
  
   }]
  
  
   },
  
  
   bindcontroltap() {
  
  
   swan.showToast({
  
  
   title: '點(diǎn)擊控件',
  
  
   icon: 'none'
  
  
   })
  
  
   }
  
  
  });
 
 
 
Bug & Tip

Tip：map 組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過(guò) z-index 控制層級(jí)。
Tip：請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 組件。
Tip：CSS 動(dòng)畫對(duì) map 組件無(wú)效。
Tip：cover-view、cover-image 組件可覆蓋在 map 組件之上。
Tip：Android 與 iOS 定位精度不同，雙端定位存在差異。
Tip：map 組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用 swan.getLocation 接口需要指定 type 為 gcj02 。
Tip：開發(fā)者工具由于坐標(biāo)系不同，定位與客戶端存在差異。開發(fā)時(shí)請(qǐng)以客戶端為準(zhǔn)。
Bug：Web 態(tài)由于坐標(biāo)系不同，定位與客戶端存在差異，坐標(biāo)與客戶端相比有一定偏移。待后續(xù)版本修復(fù)。
                                                

                                                文章題目：創(chuàng)新互聯(lián)百度小程序教程：map地圖                                                

                                                URL分享：http://www.5511xx.com/article/cddsgjc.html

屬性名	說(shuō)明	類型	必填	備注
markerId	標(biāo)記點(diǎn) id	Number	否	marker 點(diǎn)擊事件回調(diào)會(huì)返回此 id 。建議為每個(gè) marker 設(shè)置 Number 類型的 id ，保證更新 marker 時(shí)有更好的性能
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90~90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180~180
zIndex	顯示層級(jí)	Number	否	iOS 地圖不支持設(shè)置此屬性
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持網(wǎng)絡(luò)路徑、本地路徑（相對(duì)和絕對(duì)路徑寫法），工具暫不支持絕對(duì)路徑寫法
rotate	旋轉(zhuǎn)角度	Number	否	默認(rèn)為 0 ，順時(shí)針旋轉(zhuǎn)的角度，范圍 0~360
alpha	標(biāo)注的透明度	Number	否	默認(rèn)為 1 ，無(wú)透明，范圍 0~1
width	標(biāo)注圖標(biāo)寬度	Number	否	默認(rèn)為圖片實(shí)際寬度
height	標(biāo)注圖標(biāo)高度	Number	否	默認(rèn)為圖片實(shí)際高度
callout	自定義標(biāo)記點(diǎn)上方的氣泡窗口	Object	否	支持的屬性見下表，可識(shí)別換行符
label	為標(biāo)記點(diǎn)旁邊增加標(biāo)簽。暫不支持換行	Object	否	支持的屬性見下表，可識(shí)別換行符
anchor	經(jīng)緯度在標(biāo)注圖標(biāo)的錨點(diǎn)	Object	否	默認(rèn)底邊中點(diǎn)，`{x, y}`：x 表示橫向（0-1），y 表示豎向（0-1）。`{x: .5, y: 1}`表示底邊中點(diǎn)

屬性名	說(shuō)明	類型	備注
content	文本	String
color	文本顏色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
borderWidth	邊框?qū)挾?/td>	Number
borderColor	邊框顏色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	callout 邊框圓角	Number
bgColor	背景色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
padding	文本邊緣留白	Number
display	‘BYCLICK’：點(diǎn)擊顯示；’ALWAYS’：常顯	String	默認(rèn)為常顯
textAlign	文本對(duì)齊方式。有效值：left、right、center	String	默認(rèn)為居中對(duì)齊

屬性名	說(shuō)明	類型	備注
content	文本	String
color	文本顏色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
x	label 的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度	Number
y	label 的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度	Number
borderWidth	邊框?qū)挾?/td>	Number
borderColor	邊框顏色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	邊框圓角	Number
bgColor	背景色	String	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
padding	文本邊緣留白	Number
textAlign	文本對(duì)齊方式。有效值：left、right、center	String	默認(rèn)為居中對(duì)齊

屬性名	說(shuō)明	類型	必填	備注
points	經(jīng)緯度數(shù)組	Array	是	`[{latitude: 0, longitude: 0}]`
color	線的顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
width	線的寬度	Number	否
dottedLine	是否虛線	Boolean	否	默認(rèn) false
arrowLine	帶箭頭的線	Boolean	否	默認(rèn) false
arrowIconPath	更換箭頭圖標(biāo)	String	否	在 arrowLine 為 true 時(shí)生效
borderColor	線的邊框顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
borderWidth	線的厚度	Number	否

屬性名	說(shuō)明	類型	必填	備注
points	經(jīng)緯度數(shù)組	Array	是	`[{latitude: 0, longitude: 0}]`
strokeWidth	描邊的寬度	Number	否
strokeColor	描邊的顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
zIndex	設(shè)置多邊形 Z 軸數(shù)值	Number	否

屬性名	說(shuō)明	類型	必填	備注
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90~90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180~180
color	描邊的顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充顏色	String	否	8 位十六進(jìn)制表示，最后 2 位表示 alpha 值（可省略）
radius	半徑	Number	是
strokeWidth	描邊的寬度	Number	否

屬性名	說(shuō)明	類型	必填	備注
controlId	控件 id	Number	否	在控件點(diǎn)擊事件回調(diào)會(huì)返回此 id
position	控件在地圖的位置	Object	是	控件相對(duì)地圖位置
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持網(wǎng)絡(luò)路徑、本地路徑（相對(duì)和絕對(duì)路徑寫法），工具暫不支持絕對(duì)路徑寫法
clickable	是否可點(diǎn)擊	Boolean	否	默認(rèn)不可點(diǎn)擊

屬性名	說(shuō)明	類型	必填	備注
left	距離地圖的左邊界多遠(yuǎn)	Number	否	默認(rèn)為 0
top	距離地圖的上邊界多遠(yuǎn)	Number	否	默認(rèn)為 0
width	控件寬度	Number	否	默認(rèn)為圖片寬度
height	控件高度	Number	否	默認(rèn)為圖片高度


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                Redis中存儲(chǔ)的條數(shù)可視化查看（redis查看存儲(chǔ)條數(shù)）
                                                            

                                                                Linux程序死機(jī)解決方法(linux程序死機(jī))
                                                            

                                                                詳解Linux網(wǎng)絡(luò)診斷工具—MTR
                                                            

                                                                建立和保持?jǐn)?shù)據(jù)完整性的六個(gè)步驟
                                                            

                                                                認(rèn)知覺醒和認(rèn)知驅(qū)動(dòng)哪本書更好？windows驅(qū)動(dòng)開發(fā)書籍

新聞中心

map 地圖

屬性說(shuō)明

示例

代碼示例 1

代碼示例 2：原生組件設(shè)置 border 無(wú)效，也不可用 cover-view 覆蓋為圓角

marker

屬性說(shuō)明

示例

polyline

屬性說(shuō)明

示例

polygon

屬性說(shuō)明

示例

circle

屬性說(shuō)明

示例

control

屬性說(shuō)明

示例

Bug & Tip

其他資訊

代碼示例 2：原生組件設(shè)置 border 無(wú)效，也不可用 cover-view 覆蓋為圓角