全部产品
云市场
云游戏

map

更新时间:2020-04-28 16:56:04

本文介绍地图组件(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
-
中心纬度
10.1.32
longitude
Number
-
中心经度
10.1.32
scale
Number
16
缩放级别,取值范围为 5-18
10.1.32
default-scale
Number
16
默认缩放级别,取值范围为 5-18,如果只需指定初始scale,可以设置 default-scale 来替代 scale。当用户缩放后,也不需要再监听 onRegionChange 重新设置 scale
基础库 1.14.0
markers
Array
-
覆盖物,在地图上的一个点绘制图标
10.1.32
polyline
Array
-
覆盖物,多个连贯点的集合(路线)
10.1.32
circles
Array
-
覆盖物,圆
10.1.32
controls
Array
-
在地图View之上的一个控件
10.1.32
polygon
Array
-
覆盖物,多边形
10.1.32
show-location
Boolean
-
是否显示带有方向的当前定位点
10.1.32
include-points
Array
-
视野将进行小范围延伸包含传入的坐标
  1. [{ latitude: 30.279383, longitude: 120.131441,}]
10.1.32
include-padding
Object
-
视野在地图 padding 范围内展示
  1. { left:0, right:0, top:0, bottom:0}
10.1.35
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}]
10.1.35
tile-overlay
Object
-
覆盖物,网格贴图
  1. { url:'http://xxx', type:0, // url类型 tileWidth:256, tileHeight:256, zIndex:1,}
10.1.35
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,}
10.1.32
onCalloutTap
EventHandle
-
点击Marker对应的callout时触发
  1. { markerId, latitude, longitude,}
10.1.32
onControlTap
EventHandle
-
点击control时触发
  1. { controlId}
10.1.32
onRegionChange
EventHandle
-
视野发生变化时触发
  1. { type: "begin/end", latitude, longitude, scale}
10.1.32
onTap
EventHandle
-
点击地图时触发
  1. { latitude, longitude,}
10.1.32

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 坐标系
10.1.32
label
marker 上的气泡
Object
marker 上的气泡,地图上可同时展示多个,绑定onMarkerTap
  1. { content:"Hello Label", color:"#000000", fontSize:12, borderRadius:3, bgColor:"#ffffff", padding:5,}
10.1.38
style
自定义 marker 样式
Object
自定义 marker 的样式和内容
10.1.35

polygon

用于构造多边形对象。

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

polyline

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

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

circles

用于在地图上显示圆。

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

controls

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

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

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'}
10.1.35
  1. { type:2, text1:"Style2", icon1:'xxx', icon2:'xxx'}
10.1.38
  1. { type:3, icon:xxx, //选填 text:xxx, //必填 color:xxx, //默认#33B276 bgColor:xxx, //默认#FFFFFF gravity:"left/center/right", //默认 center fontType:"small/standard/large" //默认standard}
10.1.50

customCallout

结构
图片示例
支持版本
  1. { "type": 0, "time": "3", "descList": [{ "desc": "点击立即打车", "descColor": "#ffffff" }], "isShow": 1}
10.1.32
  1. { "type": 1, "time": "3", "descList": [{ "desc": "点击立即打车", "descColor": "#333333" }], "isShow": 1}
10.1.32
  1. { "type": 2, "descList": [{ "desc": "预计", "descColor": "#333333" }, { "desc": "5分钟", "descColor": "#108EE9" }, { "desc": "到达", "descColor": "#333333" }], "isShow": 1}
10.1.32
### label
结构
图鉴
支持版本
  1. { content:"Hello Label", color:"#000000", fontSize:16, borderRadius:5, bgColor:"#ffffff", padding:12,}
10.1.38
  • 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. })