新闻中心

这里有您想知道的互联网营销解决方案

创新互联百度小程序教程：map地图

map 地图
- 属性说明
- 示例
  - 代码示例 1
  - 代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角
- marker
  - 属性说明
  - 示例
- polyline
  - 属性说明
  - 示例
- polygon
  - 属性说明
  - 示例
- circle
  - 属性说明
  - 示例
- control
  - 属性说明
  - 示例
- Bug & Tip

map 地图

解释：地图。客户端创建的原生组件，使用时请注意相关限制。

创新互联主营依安网站建设的网络公司,主营网站建设方案,APP应用开发,依安h5小程序定制开发搭建,依安网站营销推广欢迎依安等地区企业咨询

属性说明

属性名	类型	默认值	必填	说明	最低版本	Web 态说明
longitude	Number	北京经度	是	gcj02 坐标系中心经度	-	-
latitude	Number	北京纬度	是	gcj02 坐标系中心纬度	-	-
scale	Number	16	否	缩放级别，取值范围为 4-21 。动态设置 scale 值用法：`scale=”{= scale =}”`	-	-
markers	Array.		否	标记点。详情请参考 marker	-	-
polyline	Array.		否	路线。详情请参考 polyline	-	-
polygons	Array.		否	多边形（工具暂不支持）。详情请参考 polygon	2.0.13 低版本请做兼容性处理	-
circles	Array.		否	圆。详情请参考 circle	-	-
controls	Array.		否	控件。详情请参考 control	-	-
include-points	Array.		否	缩放视野以包含所有给定的坐标点	-	-
show-location	Boolean	false	否	显示带有方向的当前定位点	-	暂时不能显示方向
enable-3D	Boolean	false	否	显示 3D 楼块（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
show-compass	Boolean	false	否	显示指南针（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
enable-overlooking	Boolean	false	否	开启俯视（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
enable-zoom	Boolean	true	否	是否支持缩放（工具暂不支持）	2.0.13 低版本请做兼容性处理	-
enable-scroll	Boolean	true	否	是否支持拖动（工具暂不支持）	2.0.13 低版本请做兼容性处理	-
enable-rotate	Boolean	false	否	是否支持旋转（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
bindmarkertap	EventHandle		否	点击标记点时触发	-	-
bindcallouttap	EventHandle		否	点击标记点对应的气泡时触发	-	-
bindcontroltap	EventHandle		否	点击控件时触发	-	-
bindregionchange	EventHandle		否	视野发生变化时触发	-	-
bindtap	EventHandle		否	点击地图时触发	-	-
bindupdated	EventHandle		否	在地图渲染更新完成时触发	-	-
bindpoitap	EventHandle		否	点击地图 poi 点时触发	-	暂不支持

示例

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度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">
  
  
   
  
  
   
  
  
   支持缩放
  
  
   
  
  
   
  
  
   
  
  
   支持拖动
  
  
   
  
  
   
  
  
   
  
  
   支持旋转
  
  
   
  
  
   
  
  
   
  
  
   工具暂不支持手势控制


 
 
 
  
  
  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: '西山壹号院'
  
  
   }
  
  
   }],
  
  
   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);
  
  
   },
  
  
  
  
  
   /**
  
  
   * 点击标记点时触发的事件
  
  
   */ 
  
  
   bindmarkertap() {
  
  
   swan.showToast({
  
  
   title: '点击标记啦',
  
  
   icon: 'none'
  
  
   });
  
  
   },
  
  
  });
 
 
 
代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开

SWAN
CSS

 
 
 
  
  
  
  
  
   
  
  
   

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

 
 
 
  
  
  .card-area { 
  
  
   width: 3.88rem;
  
  
   height: 2.18rem;
  
  
  }
 
 
 
marker
解释：标记点，用于在地图上显示标记的位置。
属性说明


属性名
说明
类型
必填
备注


markerId 标记点 id Number 否 marker 点击事件回调会返回此 id 。建议为每个 marker 设置 Number 类型的 id ，保证更新 marker 时有更好的性能
latitude 纬度 Number 是 浮点数，范围 -90~90
longitude 经度 Number 是 浮点数，范围 -180~180
zIndex 显示层级 Number 否 iOS 地图不支持设置此属性
iconPath 显示的图标 String 是 项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
rotate 旋转角度 Number 否 默认为 0 ，顺时针旋转的角度，范围 0~360
alpha 标注的透明度 Number 否 默认为 1 ，无透明，范围 0~1
width 标注图标宽度 Number 否 默认为图片实际宽度
height 标注图标高度 Number 否 默认为图片实际高度
callout 自定义标记点上方的气泡窗口 Object 否 支持的属性见下表，可识别换行符
label 为标记点旁边增加标签。暂不支持换行 Object 否 支持的属性见下表，可识别换行符
anchor 经纬度在标注图标的锚点 Object 否 默认底边中点，{x, y}：x 表示横向（0-1），y 表示竖向（0-1）。{x: .5, y: 1}表示底边中点
callout 属性说明 


属性名
说明
类型
备注


content 文本 String 
color 文本颜色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize 文字大小 Number 
borderWidth 边框宽度 Number 
borderColor 边框颜色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius callout 边框圆角 Number 
bgColor 背景色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding 文本边缘留白 Number 
display ‘BYCLICK’：点击显示；’ALWAYS’：常显 String 默认为常显
textAlign 文本对齐方式。有效值：left、right、center String 默认为居中对齐
label 属性说明 


属性名
说明
类型
备注


content 文本 String 
color 文本颜色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize 文字大小 Number 
x label 的坐标，原点是 marker 对应的经纬度 Number 
y label 的坐标，原点是 marker 对应的经纬度 Number 
borderWidth 边框宽度 Number 
borderColor 边框颜色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius 边框圆角 Number 
bgColor 背景色 String 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding 文本边缘留白 Number 
textAlign 文本对齐方式。有效值：left、right、center String 默认为居中对齐
示例
图片示例
代码示例
在开发者工具中打开
在开发者工具中打开
在 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: '西山壹号院',
  
  
   color: '#FFF',
  
  
   fontSize: '16',
  
  
   borderRadius: 50,
  
  
   bgColor: '#5B9FFF',
  
  
   padding: 2,
  
  
   textAlign: 'center'
  
  
   }
  
  
   }]
  
  
   },
  
  
   bindmarkertap() {
  
  
   swan.showToast({
  
  
   title: '点击标记啦',
  
  
   icon: 'none'
  
  
   });
  
  
   },
  
  
   bindcallouttap() {
  
  
   swan.showToast({
  
  
   title: '点击标记上方气泡啦',
  
  
   icon: 'none'
  
  
   });
  
  
   }
  
  
  });
 
 
 
polyline
解释：指定一系列坐标点，从数组第一项连线至最后一项。
属性说明


属性名
说明
类型
必填
备注


points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}]
color 线的颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
width 线的宽度 Number 否 
dottedLine 是否虚线 Boolean 否 默认 false
arrowLine 带箭头的线 Boolean 否 默认 false
arrowIconPath 更换箭头图标 String 否 在 arrowLine 为 true 时生效
borderColor 线的边框颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderWidth 线的厚度 Number 否 
示例
图片示例
代码示例
在开发者工具中打开
在开发者工具中打开
在 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: '开发者服务器图片路径',
  
  
   borderColor: '#FFB6C1',
  
  
   borderWidth: 5
  
  
   }]
  
  
   }
  
  
  });
 
 
 
polygon
解释：指定一系列坐标点，根据 points 坐标数据生成闭合多边形。
属性说明


属性名
说明
类型
必填
备注


points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}]
strokeWidth 描边的宽度 Number 否 
strokeColor 描边的颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor 填充颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
zIndex 设置多边形 Z 轴数值 Number 否 
示例
图片示例
代码示例
在开发者工具中打开
在开发者工具中打开
在 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
解释：在地图上显示圆
属性说明


属性名
说明
类型
必填
备注


latitude 纬度 Number 是 浮点数，范围 -90~90
longitude 经度 Number 是 浮点数，范围 -180~180
color 描边的颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor 填充颜色 String 否 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
radius 半径 Number 是 
strokeWidth 描边的宽度 Number 否 
示例
图片示例
代码示例
在开发者工具中打开
在开发者工具中打开
在 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
解释：在地图上显示控件，控件不随着地图移动。
属性说明


属性名
说明
类型
必填
备注


controlId 控件 id Number 否 在控件点击事件回调会返回此 id
position 控件在地图的位置 Object 是 控件相对地图位置
iconPath 显示的图标 String 是 项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
clickable 是否可点击 Boolean 否 默认不可点击
position 属性说明 


属性名
说明
类型
必填
备注


left 距离地图的左边界多远 Number 否 默认为 0
top 距离地图的上边界多远 Number 否 默认为 0
width 控件宽度 Number 否 默认为图片宽度
height 控件高度 Number 否 默认为图片高度
示例
图片示例
代码示例
在开发者工具中打开
在开发者工具中打开
在 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: '点击控件',
  
  
   icon: 'none'
  
  
   })
  
  
   }
  
  
  });
 
 
 
Bug & Tip

Tip：map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
Tip：CSS 动画对 map 组件无效。
Tip：cover-view、cover-image 组件可覆盖在 map 组件之上。
Tip：Android 与 iOS 定位精度不同，双端定位存在差异。
Tip：map 组件使用的经纬度是火星坐标系，调用 swan.getLocation 接口需要指定 type 为 gcj02 。
Tip：开发者工具由于坐标系不同，定位与客户端存在差异。开发时请以客户端为准。
Bug：Web 态由于坐标系不同，定位与客户端存在差异，坐标与客户端相比有一定偏移。待后续版本修复。
                                                

                                                文章标题：创新互联百度小程序教程：map地图                                                

                                                本文路径：http://www.jxjierui.cn/article/cddsgjc.html

属性名	说明	类型	必填	备注
markerId	标记点 id	Number	否	marker 点击事件回调会返回此 id 。建议为每个 marker 设置 Number 类型的 id ，保证更新 marker 时有更好的性能
latitude	纬度	Number	是	浮点数，范围 -90~90
longitude	经度	Number	是	浮点数，范围 -180~180
zIndex	显示层级	Number	否	iOS 地图不支持设置此属性
iconPath	显示的图标	String	是	项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
rotate	旋转角度	Number	否	默认为 0 ，顺时针旋转的角度，范围 0~360
alpha	标注的透明度	Number	否	默认为 1 ，无透明，范围 0~1
width	标注图标宽度	Number	否	默认为图片实际宽度
height	标注图标高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符
label	为标记点旁边增加标签。暂不支持换行	Object	否	支持的属性见下表，可识别换行符
anchor	经纬度在标注图标的锚点	Object	否	默认底边中点，`{x, y}`：x 表示横向（0-1），y 表示竖向（0-1）。`{x: .5, y: 1}`表示底边中点

属性名	说明	类型	备注
content	文本	String
color	文本颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
borderWidth	边框宽度	Number
borderColor	边框颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	callout 边框圆角	Number
bgColor	背景色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding	文本边缘留白	Number
display	‘BYCLICK’：点击显示；’ALWAYS’：常显	String	默认为常显
textAlign	文本对齐方式。有效值：left、right、center	String	默认为居中对齐

属性名	说明	类型	备注
content	文本	String
color	文本颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
x	label 的坐标，原点是 marker 对应的经纬度	Number
y	label 的坐标，原点是 marker 对应的经纬度	Number
borderWidth	边框宽度	Number
borderColor	边框颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	边框圆角	Number
bgColor	背景色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding	文本边缘留白	Number
textAlign	文本对齐方式。有效值：left、right、center	String	默认为居中对齐

属性名	说明	类型	必填	备注
points	经纬度数组	Array	是	`[{latitude: 0, longitude: 0}]`
color	线的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认 false
arrowLine	带箭头的线	Boolean	否	默认 false
arrowIconPath	更换箭头图标	String	否	在 arrowLine 为 true 时生效
borderColor	线的边框颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderWidth	线的厚度	Number	否

属性名	说明	类型	必填	备注
points	经纬度数组	Array	是	`[{latitude: 0, longitude: 0}]`
strokeWidth	描边的宽度	Number	否
strokeColor	描边的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
zIndex	设置多边形 Z 轴数值	Number	否

属性名	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90~90
longitude	经度	Number	是	浮点数，范围 -180~180
color	描边的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否

属性名	说明	类型	必填	备注
controlId	控件 id	Number	否	在控件点击事件回调会返回此 id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
clickable	是否可点击	Boolean	否	默认不可点击

属性名	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为 0
top	距离地图的上边界多远	Number	否	默认为 0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度


                                            
                                                
                                                    其他资讯
                                                
                                                
                                                    
                                                        
                                                                AMH通过更改MySQL密码管理数据库安全
                                                            

                                                                教你利用二叉树的思想，轻松解决合并排序和快速
                                                            

                                                                C#动态数组实用实例解析
                                                            

                                                                阿里云镜像加速器收费吗
                                                            

                                                                2023年值得选择的15个优秀JavaScript框架