全部产品

map

本文介绍地图组件(map)。

使用说明

  • map 组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法在原生组件之上。
  • 请勿在 scroll-view 中使用 map 组件。
  • css 动画对 map 组件无效。
  • 缩小或者放大了地图比例尺之后,请在 onRegionChange 函数中重新设置 datascale 值,否则会出现拖动地图区域后,重新加载导致地图比例尺又变回缩放前的大小,具体请参照示例代码 regionchange 函数部分。基础库 1.14.0 以上,可以使用 default-scale 属性替代 scale 来优化代码。

Map

同一个页面需要展示多个 map 组件的话,需要使用不同的 ID。

属性
类型
默认值
说明
支持版本
style
String
-
内联样式
-
class
String
-
样式名
-
latitude
Number
-
中心纬度
-
longitude
Number
-
中心经度
-
scale
Number
16
缩放级别,取值范围为 5-18。
-
default-scale
Number
16
默认缩放级别,取值范围为 5-18,如果只需指定初始scale,可以设置 default-scale 来替代 scale。当用户缩放后,也不需要再监听 onRegionChange 重新设置 scale。
基础库 1.14.0
markers
Array
-
覆盖物,在地图上的一个点绘制图标。
-
polyline
Array
-
覆盖物,多个连贯点的集合(路线)。
-
circles
Array
-
覆盖物,圆。
-
controls
Array
-
在地图View之上的一个控件。
-
polygon
Array
-
覆盖物,多边形。
-
show-location
Boolean
-
是否显示带有方向的当前定位点。
-
include-points
Array
-
视野将进行小范围延伸包含传入的坐标。
       
  1. [{ latitude: 30.279383, longitude: 120.131441,}]
-
include-padding
Object
-
视野在地图 padding 范围内展示。
       
  1. { left:0, right:0, top:0, bottom:0}
-
ground-overlays
Array
-
覆盖物,自定义贴图。
       
  1. [{ // 右上,左下 'include-points':[{ latitude: 39.935029, longitude: 116.384377, },{ latitude: 39.939577, longitude: 116.388331, }], image:'/image/overlay.png', alpha:0.25, zIndex:1}]
-
tile-overlay
Object
-
覆盖物,网格贴图。
       
  1. { url:'http://xxx', type:0, // url类型 tileWidth:256, tileHeight:256, zIndex:1,}
-
setting
Object
-
设置
       
  1. { // 手势 gestureEnable: 1, // 比例尺 showScale: 1, // 指南针 showCompass: 1, //双手下滑 tiltGesturesEnabled: 1, // 交通路况展示 trafficEnabled: 0, // 地图 POI 信息 showMapText: 0, // 高德地图 logo 位置 logoPosition: { centerX: 150, centerY: 90 }}
-
onMarkerTap
EventHandle
-
点击Marker时触发。
       
  1. { markerId, latitude, longitude,}
-
onCalloutTap
EventHandle
-
点击Marker对应的callout时触发。
       
  1. { markerId, latitude, longitude,}
-
onControlTap
EventHandle
-
点击control时触发。
       
  1. { controlId}
-
onRegionChange
EventHandle
-
视野发生变化时触发。
       
  1. { type: "begin/end", latitude, longitude, scale}
-
onTap
EventHandle
-
点击地图时触发。
       
  1. { latitude, longitude,}
-

markers

标记点,用于在地图上显示标记的位置。

属性名
说明
类型
必填
备注
最低版本
id
标记点id
Number
标记点 id,点击事件回调会返回此 id。
-
latitude
纬度
Float
范围 -90 ~ 90
-
longitude
经度
Float
范围 -180 ~ 180
-
title
标注点名
String
-
-
iconPath
显示的图标
String
项目目录下的图片路径,可以用相对路径写法,以'/'开头则表示相对小程序根目录。
-
rotate
旋转角度
Number
顺时针旋转的角度,范围 0 ~ 360,默认为 0。
-
alpha
标注的透明度
Number
是否透明,默认为 1。
-
width
标注图标宽度
Number
默认为图片的实际宽度
-
height
标注图标高度
Number
默认为图片的实际高度
-
callout
自定义标记点上方的气泡窗口
Object
marker 上的气泡,地图上最多同时展示一个,绑定 onCalloutTap。
        
  1. { content:"xxx"}
-
anchorX
经纬度在标注图标的锚点-横向值
Double
这两个参数值需要成对出现,anchorX 表示横向(0-1),y 表示竖向(0-1)。
例如:
anchorX:0.5,
anchorY:1
表示底边中点
-
anchorY
经纬度在标注图标的锚点-竖向值
Double
-
customCallout
callout背景自定义
目前只支持高德地图 style
Object
        
  1. { "type": 2, "descList": [{ "desc": "预计", "descColor": "#333333" }, { "desc": "5分钟", "descColor": "#108EE9" }, { "desc": "到达", "descColor": "#333333" }], "isShow": 1}
-
iconAppendStr
marker 图片可以来源于 View
String
和 iconPath 一起使用,会将 iconPath 对应的图片及该字符串共同生成一个图片,当成 marker 的图标。
-
iconAppendStrColor
marker 图片可以来源于 View,底部描述文本颜色。
String
默认是:#33B276
-
fixedPoint
基于屏幕位置扎点
Object
基于屏幕位置扎点
        
  1. { //距离地图左上角的像素数,Number originX:100, originY:100}
-
markerLevel
marker 在地图上的绘制层级
Number
与地图上其他覆盖物统一的 Z 坐标系。
-
label
marker 上的气泡
Object
marker 上的气泡,地图上可同时展示多个,绑定 onMarkerTap。
        
  1. { content:"Hello Label", color:"#000000", fontSize:12, borderRadius:3, bgColor:"#ffffff", padding:5,}
-
style
自定义 marker 样式
Object
自定义 marker 的样式和内容
-

polygon

用于构造多边形对象。

属性名
说明
类型
必填
备注
支持版本
points
经纬度数组
Array
        
  1. [{ latitude: 0, longitude: 0}]
-
color
线的颜色
String
用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeAA。
-
fillColor
填充色
String
用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeAA。
-
width
线的宽度
Number
-
-

polyline

用于指定一系列坐标点,从数组第一项连线至最后一项。

属性名
说明
类型
必填
备注
最低版本
points
经纬度数组
Array
        
  1. [{ latitude: 0, longitude: 0}]
-
color
线的颜色
String
用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeAA。
-
width
线的宽度
Number
-
-
dottedLine
是否虚线
Boolean
默认 false
-
iconPath
线的纹理地址
String
项目目录下的图片路径,可以用相对路径写法,以'/'开头则表示相对小程序根目录。
-
iconWidth
使用纹理时的宽度
Number
-
-
zIndex
覆盖物的 Z 轴坐标
Number
-
-
-
iconPath
纹理
String
-
项目目录下的图片路径,可以用相对路径写法,以 '/'开头则表示相对小程序根目录, 如果有 iconPath,会忽略 color。但是 iconPath 可以和 colorList 联合使用,这样纹理会浮在彩虹线上方,为避免覆盖彩虹线,纹理图片背景色可以设置透明。
-
colorList
彩虹线
Array
-
彩虹线,分段依据 points。例如 points 有 5 个点,那么 colorList 就应该传 4 个颜色值,依此类推。如果 colorList 数量小于 4,那么剩下的线路颜色和最后一个颜色一样。
        
  1. [ "#AAAAAA", "#BBBBBB"]
-

circles

用于在地图上显示圆。

属性名 说明 类型 必填 备注 支持版本
latitude 纬度 Float 范围 -90 ~ 90 -
longitude 经度 Float 范围 -180 ~ 180 -
color 描边的颜色 String 用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeAA。 -
fillColor 填充颜色 String 用 8 位十六进制表示,后两位表示 alpha 值,如:#eeeeeeAA。 -
radius 半径 Number - -
strokeWidth 描边的宽度 Number - -

controls

用于在地图上显示控件,控件不随着地图移动。

属性名 说明 类型 必填 备注 支持版本
id 控件id Number 控件 id,点击事件回调会返回此 id。 -
position 控件在地图的位置 Object 相对地图位置 -
iconPath 显示的图标 String 项目目录下的图片路径,可以用相对路径写法,以’/‘开头则表示相对小程序根目录。 -
clickable 是否可点击 Boolean 默认为 false -

position

控件在地图的位置,以及控件的大小。

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

callout

自定义标记点上方的气泡窗口。

属性名 说明 类型 必填 备注
content 内容 String 默认为空(null)

customCallout

自定义 callout 背景。目前只支持高德地图 style 。

属性名
说明
类型
必填
备注
type
样式类型
Number
0 为黑色 style,1 为白色 style,2 为背景 + 文本,见下图。
time
时间
String
时间值
descList
描述数组
Array
描述数组
        
  1. { "type": 0, "time": "3", "descList": [{ "desc": "点击立即打车", "descColor": "#ffffff" }], "isShow": 1}

fixedPoint

基于屏幕位置的扎点。

属性名 说明 类型 必填 备注
originX 横向像素点 Number 距离地图左上角的像素数值(从 0 开始)
originY 纵向像素点 Number 距离地图左上角的像素数值(从 0 开始)

地图组件的经纬度是必需设置的,若未设置经纬度,则默认是北京的经纬度。

Marker 图鉴

Marker 样式优先级说明

  • customCalloutcalloutlabel 互斥,优先级排序为:label > customCallout > callout
  • styleicon 互斥,优先级排序为:style > iconAppendStr;style > icon

style

结构
图片示例
支持版本
       
  1. { type:1, text1:"Style1", icon1:'xxx', icon2:'xxx'}
-
       
  1. { type:2, text1:"Style2", icon1:'xxx', icon2:'xxx'}
-
       
  1. { type:3, icon:xxx, //选填 text:xxx, //必填 color:xxx, //默认#33B276 bgColor:xxx, //默认#FFFFFF gravity:"left/center/right", //默认 center fontType:"small/standard/large" //默认standard}
-

customCallout

结构
图片示例
支持版本
        
  1. { "type": 0, "time": "3", "descList": [{ "desc": "点击立即打车", "descColor": "#ffffff" }], "isShow": 1}
-
        
  1. { "type": 1, "time": "3", "descList": [{ "desc": "点击立即打车", "descColor": "#333333" }], "isShow": 1}
-
        
  1. { "type": 2, "descList": [{ "desc": "预计", "descColor": "#333333" }, { "desc": "5分钟", "descColor": "#108EE9" }, { "desc": "到达", "descColor": "#333333" }], "isShow": 1}
-
### label
结构
图鉴
支持版本
         
  1. { content:"Hello Label", color:"#000000", fontSize:16, borderRadius:5, bgColor:"#ffffff", padding:12,}
-
  • content:必填
  • color:选填,默认”#000000”
  • fontsize:选填,默认14
  • borderRadius:选填,默认20
  • bgColor:选填,默认”#FFFFFF”
  • padding:选填,默认10

图示

image | center

示例代码

    
  1. <view>
  2. <map id="map" longitude="120.131441" latitude="30.279383" scale="{{scale}}" controls="{{controls}}"
  3. onControlTap="controltap" markers="{{markers}}"
  4. onMarkerTap="markertap"
  5. polyline="{{polyline}}" circles="{{circles}}"
  6. onRegionChange="regionchange"
  7. onTap="tap"
  8. show-location style="width: 100%; height: 300px;"
  9. include-points="{{includePoints}}"></map>
  10. <button onTap="changeScale">改scale</button>
  11. <button onTap="getCenterLocation">getCenterLocation</button>
  12. <button onTap="moveToLocation">moveToLocation</button>
  13. <button onTap="changeCenter">改center</button>
  14. <button onTap="changeMarkers">改markers</button>
  15. </view>
    
  1. Page({
  2. data: {
  3. scale: 14,
  4. longitude: 120.131441,
  5. latitude: 30.279383,
  6. markers: [{
  7. iconPath: "/image/green_tri.png",
  8. id: 10,
  9. latitude: 30.279383,
  10. longitude: 120.131441,
  11. width: 50,
  12. height: 50
  13. },{
  14. iconPath: "/image/green_tri.png",
  15. id: 10,
  16. latitude: 30.279383,
  17. longitude: 120.131441,
  18. width: 50,
  19. height: 50,
  20. customCallout: {
  21. type: 1,
  22. time: '1',
  23. },
  24. fixedPoint:{
  25. originX: 400,
  26. originY: 400,
  27. },
  28. iconAppendStr: '黄龙时代广场test'
  29. }],
  30. includePoints: [{
  31. latitude: 30.279383,
  32. longitude: 120.131441,
  33. }],
  34. polyline: [{
  35. points: [{
  36. longitude: 120.131441,
  37. latitude: 30.279383
  38. }, {
  39. longitude: 120.128821,
  40. latitude: 30.278200
  41. }, {
  42. longitude: 120.131618,
  43. latitude: 30.277600
  44. }, {
  45. longitude: 120.132520,
  46. latitude: 30.279393
  47. }, {
  48. longitude: 120.137517,
  49. latitude: 30.279383
  50. }],
  51. color: "#FF0000DD",
  52. width: 5,
  53. dottedLine: false
  54. }],
  55. circles: [{
  56. latitude: 30.279383,
  57. longitude: 120.131441,
  58. color: "#000000AA",
  59. fillColor: "#000000AA",
  60. radius: 80,
  61. strokeWidth: 5,
  62. }],
  63. controls: [{
  64. id: 5,
  65. iconPath: '../../resources/pic/2.jpg',
  66. position: {
  67. left: 0,
  68. top: 300 - 50,
  69. width: 50,
  70. height: 50
  71. },
  72. clickable: true
  73. }]
  74. },
  75. onReady(e) {
  76. // 使用 my.createMapContext 获取 map 上下文
  77. this.mapCtx = my.createMapContext('map')
  78. },
  79. getCenterLocation() {
  80. this.mapCtx.getCenterLocation(function (res) {
  81. console.log(res.longitude)
  82. console.log(res.latitude)
  83. })
  84. },
  85. moveToLocation() {
  86. this.mapCtx.moveToLocation()
  87. },
  88. regionchange(e) {
  89. console.log('regionchange', e);
  90. // 注意:如果缩小或者放大了地图比例尺以后,请在 onRegionChange 函数中重新设置 data 的
  91. // scale 值,否则会出现拖动地图区域后,重新加载导致地图比例尺又变回缩放前的大小的情况。
  92. if (e.type === 'end') {
  93. this.setData({
  94. scale: e.scale
  95. });
  96. }
  97. },
  98. markertap(e) {
  99. console.log('marker tap', e);
  100. },
  101. controltap(e) {
  102. console.log('control tap', e);
  103. },
  104. tap() {
  105. console.log('tap:');
  106. },
  107. changeScale() {
  108. this.setData({
  109. scale: 8,
  110. });
  111. },
  112. changeCenter() {
  113. this.setData({
  114. longitude: 113.324520,
  115. latitude: 23.199994,
  116. includePoints: [{
  117. latitude: 23.199994,
  118. longitude: 113.324520,
  119. }],
  120. });
  121. },
  122. //支持地图不接受手势事件,isGestureEnable,为 1 表示支持,为 0 表示不支持。
  123. gestureEnable() {
  124. this.mapCtx.gestureEnable({isGestureEnable:1});
  125. },
  126. //地图是否显示比例尺,showsScale 为 1 表示显示,为 0 表示不显示。
  127. showsScale() {
  128. this.mapCtx.showsScale({isShowsScale:1});
  129. },
  130. //地图是否显示指南针,showsCompass 为 1 表示显示,为 0 表示不显示。
  131. showsCompass() {
  132. this.mapCtx.showsCompass({isShowsCompass:1});
  133. },
  134. changeMarkers() {
  135. this.setData({
  136. markers: [{
  137. iconPath: "/image/green_tri.png",
  138. id: 10,
  139. latitude: 21.21229,
  140. longitude: 113.324520,
  141. width: 50,
  142. height: 50
  143. }],
  144. includePoints: [{
  145. latitude: 21.21229,
  146. longitude: 113.324520,
  147. }],
  148. });
  149. },
  150. })