map 地图

解释:地图,客户端创建的原生组件map 地图 - 图1,使用时请注意相关限制。

属性说明

属性名类型默认值必填说明最低版本
longitudeNumbergcj02 坐标系中心经度-
latitudeNumbergcj02 坐标系中心纬度-
scaleNumber16缩放级别,取值范围为4-21-
markersArray.<marker>标记点-
polylineArray.<polyline>路线-
polygonsArray.<polygon>多边形(工具暂不支持)2.0.13 低版本请做兼容性处理
circlesArray.<circle>-
controlsArray.<control>控件-
include-pointsArray.<point>缩放视野以包含所有给定的坐标点-
show-locationBooleanfalse显示带有方向的当前定位点-
enable-3DBooleanfalse显示3D楼块(工具暂不支持)2.0.13低版本请做兼容性处理
show-compassBooleanfalse显示指南针(工具暂不支持)2.0.13低版本请做兼容性处理
enable-overlookingBooleanfalse开启俯视(工具暂不支持)2.0.13 低版本请做兼容性处理
enable-zoomBooleantrue是否支持缩放(工具暂不支持)2.0.13 低版本请做兼容性处理
enable-scrollBooleantrue是否支持拖动(工具暂不支持)2.0.13 低版本请做兼容性处理
enable-rotateBooleanfalse是否支持旋转(工具暂不支持)2.0.13低版本请做兼容性处理
bindmarkertapEventHandle点击标记点时触发-
bindcallouttapEventHandle点击标记点对应的气泡时触发-
bindcontroltapEventHandle点击控件时触发-
bindregionchangeEventHandle视野发生变化时触发-
bindtapEventHandle点击地图时触发-
bindupdatedEventHandle在地图渲染更新完成时触发-
bindpoitapEventHandle点击地图poi点时触发-

示例

在开发者工具中预览效果

扫码体验

map 地图 - 图2请使用百度APP扫码

图片示例

map 地图 - 图3

map 地图 - 图4

map 地图 - 图5

代码示例 :地图

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. scale="{{scale}}"
  7. markers="{{markers}}"
  8. polyline="{{polyline}}"
  9. polygons="{{polygons}}"
  10. circles="{{circles}}"
  11. controls="{{controls}}"
  12. include-points="{{includePoints}}"
  13. show-location="{{showLocation}}"
  14. enable-3D="{{enable3d}}"
  15. show-compass="{{showCompass}}"
  16. enable-overlooking="{{enableOverlooking}}"
  17. enable-zoom="{{enableZoom}}"
  18. enable-scroll="{{enableScroll}}"
  19. enable-rotate="{{enableRotate}}"
  20. bindmarkertap="onMarkertap"
  21. bindcallouttap="onCallouttap"
  22. bindcontroltap="onControltap"
  23. bindregionchange="onRegionchange"
  24. bindtap="onTap"
  25. bindupdated="onUpdated"
  26. bindpoitap="onPoitap">
  27. </map>
  28. </view>
  1. Page({
  2. data: {
  3. scale: 16,
  4. latitude: 40.048828,
  5. longitude: 116.280412,
  6. showLocation: true,
  7. enable3d: false,
  8. showCompass: false,
  9. enableOverlooking: false,
  10. enableZoom: true,
  11. enableScroll: true,
  12. enableRotate: false,
  13. polygons: [],
  14. markers: [{
  15. markerId: 1,
  16. latitude: 40.052751,
  17. longitude: 116.278796
  18. }, {
  19. markerId: 2,
  20. latitude: 40.048828,
  21. longitude: 116.280412,
  22. callout: {
  23. display: 'ALWAYS',
  24. content: '百度科技园'
  25. }
  26. }, {
  27. markerId: 3,
  28. latitude: 40.049655,
  29. longitude: 116.27505,
  30. callout: {
  31. display: 'ALWAYS',
  32. content: '西山壹号院'
  33. }
  34. }],
  35. polyline: [{
  36. points: [{
  37. longitude: 116.278796,
  38. latitude: 40.048828
  39. }, {
  40. longitude: 116.27505,
  41. latitude: 40.049655
  42. }],
  43. color: '#FF5F41FF',
  44. width: 2,
  45. dottedLine: true
  46. }],
  47. circles: [{
  48. latitude: 40.052751,
  49. longitude: 116.278796,
  50. color: '#FF5F41FF',
  51. fillColor: '#FF5F41FF',
  52. radius: 200,
  53. strokeWidth: 2
  54. }],
  55. controls: [{
  56. controlId: 1,
  57. iconPath: '/images/api_logo.png',
  58. position: {
  59. left: 0,
  60. top: 100,
  61. width: 50,
  62. height: 50
  63. },
  64. clickable: true
  65. }]
  66. },
  67. onReady() {
  68. console.log('map ready');
  69. this.mapContext = swan.createMapContext('myMap');
  70. },
  71. onMarkertap(e) {
  72. console.log('onMarkertap callback:');
  73. console.log(e);
  74. },
  75. onCallouttap(e) {
  76. console.log('onCallouttap callback:');
  77. console.log(e);
  78. },
  79. onControltap(e) {
  80. console.log('onControltap callback:');
  81. console.log(e);
  82. },
  83. onRegionchange(e) {
  84. console.log('onRegionchange callback:');
  85. console.log(e);
  86. },
  87. onTap(e) {
  88. console.log('onTap callback:');
  89. console.log(e);
  90. },
  91. onUpdated(e) {
  92. console.log('onUpdated callback:');
  93. console.log(e);
  94. },
  95. onPoitap(e) {
  96. console.log('onPoitap callback:');
  97. console.log(e);
  98. }
  99. });

markers

解释 :标记点,用于在地图上显示标记的位置

属性说明

属性名说明类型必填备注
markerId标记点idNumbermarker点击事件回调会返回此id。建议为每个marker设置Number类型的id,保证更新marker时有更好的性能。
latitude纬度Number浮点数,范围 -90 ~ 90
longitude精度Number浮点数,范围 -180 ~ 180
title标注点名String点击时显示,callout存在时将被忽略
zIndex显示层级Number
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文本颜色String8位十六进制表示,最后2位表示alpha值(可省略)
fontSize文字大小Number
borderWidth边框宽度Number
borderColor边框颜色String8位十六进制表示,最后2位表示alpha值(可省略)
borderRadiuscallout边框圆角Number
bgColor背景色String8位十六进制表示,最后2位表示alpha值(可省略)
padding文本边缘留白Number
display'BYCLICK':点击显示; 'ALWAYS':常显String默认为常显
textAlign文本对齐方式。有效值: left, right, centerString默认为居中对齐

label 属性说明

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

参考示例

图片示例

map 地图 - 图6

map 地图 - 图7

map 地图 - 图8

参考示例 1: 标记点

在开发者工具中预览效果

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. markers="{{markers}}"
  7. bindmarkertap="bindmarkertap"
  8. bindcallouttap="bindcallouttap">
  9. </map>
  10. </view>
  1. Page({
  2. data: {
  3. latitude: 40.048828,
  4. longitude: 116.280412,
  5. markers: [{
  6. markerId: 1,
  7. latitude: 40.048828,
  8. longitude: 116.280412,
  9. title: 'markerId: 1',
  10. zIndex: 100,
  11. iconPath: '../images/location.png',
  12. rotate: 90,
  13. callout: {
  14. display: 'ALWAYS',
  15. content: '百度科技园',
  16. color: '#000',
  17. fontSize: '16',
  18. borderRadius: 50,
  19. bgColor: '#5B9FFF',
  20. padding: 2,
  21. textAlign: 'center'
  22. }
  23. }, {
  24. markerId: 2,
  25. latitude: 40.049655,
  26. longitude: 116.27505,
  27. title: 'markerId: 2',
  28. zIndex: 100,
  29. rotate: 90,
  30. alpha: 0.5,
  31. width: 30,
  32. height: 50,
  33. label: {
  34. 'content': 'label',
  35. 'color': '#7B68EE',
  36. 'fontSize': 16,
  37. 'borderWidth': 1,
  38. 'borderColor': '#5B9FFF',
  39. 'borderRadius': 50,
  40. 'bgColor': '#ADCFFF',
  41. 'padding': 5,
  42. 'textAlign': 'center'
  43. },
  44. anchor: {x: .5, y: 1},
  45. callout: {
  46. display: 'BYCLICK',
  47. content: '西山壹号院',
  48. color: '#FFF',
  49. fontSize: '16',
  50. borderRadius: 50,
  51. bgColor: '#5B9FFF',
  52. padding: 2,
  53. textAlign: 'center'
  54. }
  55. }]
  56. },
  57. bindmarkertap() {
  58. swan.showToast({
  59. title: '点击标记啦',
  60. icon: 'none'
  61. });
  62. },
  63. bindcallouttap() {
  64. swan.showToast({
  65. title: '点击标记上方气泡啦',
  66. icon: 'none'
  67. });
  68. }
  69. });

polyline

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

属性说明

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

示例

图片示例

map 地图 - 图9

map 地图 - 图10

map 地图 - 图11

代码示例2

在开发者工具中预览效果

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. polyline="{{polyline}}">
  7. </map>
  8. </view>
  1. Page({
  2. data: {
  3. latitude: 40.048828,
  4. longitude: 116.280412,
  5. polyline: [{
  6. points: [{
  7. longitude: 116.278796,
  8. latitude: 40.048828
  9. }, {
  10. longitude: 116.27505,
  11. latitude: 40.049655
  12. }],
  13. color: '#000000AA',
  14. width: 2,
  15. dottedLine: true,
  16. arrowLine: true,
  17. // arrowIconPath: '开发者服务器图片路径',
  18. borderColor: '#FFB6C1',
  19. borderWidth: 5
  20. }]
  21. }
  22. });

polygon

解释:指定一系列坐标点,根据 points 坐标数据生成闭合多边形。

属性说明

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

示例

图片示例

map 地图 - 图12

map 地图 - 图13

map 地图 - 图14

代码示例3:

在开发者工具中预览效果

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. polygons="{{polygons}}">
  7. </map>
  8. </view>
  1. Page({
  2. data: {
  3. latitude: 40.048828,
  4. longitude: 116.280412,
  5. polygons: [{
  6. points: [{
  7. longitude: 116.278796,
  8. latitude: 40.048828
  9. }, {
  10. longitude: 116.27505,
  11. latitude: 40.049655
  12. },{
  13. longitude: 116.27305,
  14. latitude: 40.050655
  15. },{
  16. longitude: 116.27105,
  17. latitude: 40.051655
  18. }],
  19. strokeWidth: 1,
  20. strokeColor: '#000000AA',
  21. fillColor: '#000000AA',
  22. zIndex: 20
  23. }]
  24. }
  25. });

circle

解释:在地图上显示圆

属性说明

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

示例

图片示例

map 地图 - 图15

map 地图 - 图16

map 地图 - 图17

代码示例4:

在开发者工具中预览效果

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. circles="{{circles}}">
  7. </map>
  8. </view>
  1. Page({
  2. data: {
  3. scale: 16,
  4. latitude: 40.048828,
  5. longitude: 116.280412,
  6. circles: [{
  7. latitude: 40.052751,
  8. longitude: 116.278796,
  9. color: '#FF5F41FF',
  10. fillColor: '#FF5F41FF',
  11. radius: 200,
  12. strokeWidth: 2
  13. }]
  14. }
  15. });

control

解释:在地图上显示控件,控件不随着地图移动。

属性说明

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

position 属性说明

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

示例

图片示例

map 地图 - 图18

map 地图 - 图19

map 地图 - 图20

代码示例5

在开发者工具中预览效果

  1. <view class="wrap">
  2. <map
  3. style="width: 100%; height: 300px;"
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}"
  6. controls="{{controls}}"
  7. bindcontroltap="bindcontroltap"
  8. >
  9. </map>
  10. </view>
  1. Page({
  2. data: {
  3. latitude: 40.048828,
  4. longitude: 116.280412,
  5. controls: [{
  6. controlId: 1,
  7. iconPath: '/images/navigate.png',
  8. position: {
  9. left: 0,
  10. top: 100,
  11. width: 50,
  12. height: 50
  13. },
  14. clickable: true
  15. }]
  16. },
  17. bindcontroltap() {
  18. swan.showToast({
  19. title: '点击控件',
  20. icon: 'none'
  21. })
  22. }
  23. });

代码示例 - 错误用法:原生组件设置border无效,也不可用cover-view覆盖为圆角 :

在开发者工具中预览效果

  1. <view class="wrap">
  2. <cover-view class="card-area">
  3. <map
  4. longitude="{{longitude}}"
  5. latitude="{{latitude}}">
  6. </map>
  7. </cover-view>
  8. </view>
  1. .card-area {
  2. width: 3.88rem;
  3. height: 2.18rem;
  4. }

Bug & Tip

  • Tip:地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
  • Tip:map 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
  • Tip:请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
  • Tip:CSS 动画对 map 组件无效。
  • Tip:cover-view、cover-image 组件可覆盖在map组件之上。
  • Bug:map组件的 markers 的 label 暂不支持换行。
  • Tip:Android 与 iOS 定位精度不同,双端定位存在差异。
  • Tip:map 组件使用的经纬度是火星坐标系,调用 swan.getLocation 接口需要指定 type 为 gcj02。
  • Tip:开发者工具由于坐标系不同,定位与客户端存在差异。开发时请以客户端为准。