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

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

    map 地图

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

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

    属性说明

    属性名 类型 默认值 必填 说明 最低版本 Web 态说明
    longitudeNumber北京经度是gcj02 坐标系中心经度--
    latitudeNumber北京纬度是gcj02 坐标系中心纬度--
    scaleNumber16否缩放级别，取值范围为 4-21 。动态设置 scale 值用法：scale=”{= scale =}”--
    markersArray.否标记点。详情请参考 marker--
    polylineArray.否路线。详情请参考 polyline--
    polygonsArray.否多边形（工具暂不支持）。详情请参考 polygon2.0.13
    低版本请做兼容性处理    		-
    circlesArray.否圆。详情请参考 circle--
    controlsArray.否控件。详情请参考 control--
    include-pointsArray.否缩放视野以包含所有给定的坐标点--
    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 点时触发-暂不支持

    示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  longitude="{{longitude}}"
      5. 
  
  
  
    5.  latitude="{{latitude}}"
      6. 
  
  
  
    6.  scale="{{scale}}"
      7. 
  
  
  
    7.  markers="{{markers}}"
      8. 
  
  
  
    8.  polyline="{{polyline}}"
      9. 
  
  
  
    9.  polygons="{{drawPolygon ? polygons : []}}"
      10. 
  
  
  
    10.  circles="{{circles}}"
      11. 
  
  
  
    11.  controls="{{controls}}"
      12. 
  
  
  
    12.  show-location="{{showLocation}}"
      13. 
  
  
  
    13.  include-points="{{includePoints}}"
      14. 
  
  
  
    14.  enable-3D="{{enable3d}}"
      15. 
  
  
  
    15.  show-compass="{{showCompass}}"
      16. 
  
  
  
    16.  enable-overlooking="{{enableOverlooking}}"
      17. 
  
  
  
    17.  enable-zoom="{{enableZoom}}"
      18. 
  
  
  
    18.  enable-scroll="{{enableScroll}}"
      19. 
  
  
  
    19.  enable-rotate="{{enableRotate}}"
      20. 
  
  
  
    20.  bindmarkertap="onMarkertap"
      21. 
  
  
  
    21.  bindcallouttap="onCallouttap"
      22. 
  
  
  
    22.  bindcontroltap="onControltap"
      23. 
  
  
  
    23.  bindregionchange="onRegionchange"
      24. 
  
  
  
    24.  bindtap="onTap" 
      25. 
  
  
  
    25.  bindupdated="onUpdated"
      26. 
  
  
  
    26.  bindpoitap="onPoitap">
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  
      29. 
  
  
  
    29.  支持缩放
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      32. 
  
  
  
    32.  
      33. 
  
  
  
    33.  支持拖动
      34. 
  
  
  
    34.  
      35. 
  
  
  
    35.  
      36. 
  
  
  
    36.  
      37. 
  
  
  
    37.  支持旋转
      38. 
  
  
  
    38.  
      39. 
  
  
  
    39.  
      40. 
  
  
  
    40.  
      41. 
  
  
  
    41.  工具暂不支持手势控制
      42. 
  
  
  
      43. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  latitude: '40.048828',
      4. 
  
  
  
    4.  longitude: '116.280412',
      5. 
  
  
  
    5.  scale: 16,
      6. 
  
  
  
    6.  isWeb: false,
      7. 
  
  
  
    7.  polygons: [],
      8. 
  
  
  
    8.  drawPolygon: false,
      9. 
  
  
  
    9.  includePoints: [],
      10. 
  
  
  
    10.  showLocation: false,
      11. 
  
  
  
    11.  enable3d: false,
      12. 
  
  
  
    12.  showCompass: false,
      13. 
  
  
  
    13.  enableOverlooking: false,
      14. 
  
  
  
    14.  enableZoom: true,
      15. 
  
  
  
    15.  enableScroll: true,
      16. 
  
  
  
    16.  enableRotate: true,
      17. 
  
  
  
    17.  markers: [{
      18. 
  
  
  
    18.  markerId: '1',
      19. 
  
  
  
    19.  latitude: '40.052751',
      20. 
  
  
  
    20.  longitude: '116.278796'
      21. 
  
  
  
    21.  }, {
      22. 
  
  
  
    22.  markerId: '2',
      23. 
  
  
  
    23.  latitude: '40.048828',
      24. 
  
  
  
    24.  longitude: '116.280412',
      25. 
  
  
  
    25.  title: 'markerId: 2',
      26. 
  
  
  
    26.  zIndex: 100,
      27. 
  
  
  
    27.  iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/demo_location.png',
      28. 
  
  
  
    28.  rotate: 0,
      29. 
  
  
  
    29.  width: 30,
      30. 
  
  
  
    30.  height: 50,
      31. 
  
  
  
    31.  callout: {
      32. 
  
  
  
    32.  display: 'ALWAYS',
      33. 
  
  
  
    33.  content: '百度科技园',
      34. 
  
  
  
    34.  color: '#000',
      35. 
  
  
  
    35.  fontSize: '16',
      36. 
  
  
  
    36.  borderRadius: 50,
      37. 
  
  
  
    37.  bgColor: '#5B9FFF',
      38. 
  
  
  
    38.  padding: 2,
      39. 
  
  
  
    39.  textAlign: 'center'
      40. 
  
  
  
    40.  }
      41. 
  
  
  
    41.  }, {
      42. 
  
  
  
    42.  markerId: '3',
      43. 
  
  
  
    43.  latitude: '40.049655',
      44. 
  
  
  
    44.  longitude: '116.27505',
      45. 
  
  
  
    45.  callout: {
      46. 
  
  
  
    46.  display: 'ALWAYS',
      47. 
  
  
  
    47.  content: '西山壹号院'
      48. 
  
  
  
    48.  }
      49. 
  
  
  
    49.  }],
      50. 
  
  
  
    50.  polyline: [{
      51. 
  
  
  
    51.  points: [{
      52. 
  
  
  
    52.  longitude: 116.278796,
      53. 
  
  
  
    53.  latitude: 40.048828
      54. 
  
  
  
    54.  }, {
      55. 
  
  
  
    55.  longitude: 116.27505,
      56. 
  
  
  
    56.  latitude: 40.049655
      57. 
  
  
  
    57.  }],
      58. 
  
  
  
    58.  color: '#FF5F41FF',
      59. 
  
  
  
    59.  width: 2,
      60. 
  
  
  
    60.  dottedLine: true
      61. 
  
  
  
    61.  }],
      62. 
  
  
  
    62.  controls: [{
      63. 
  
  
  
    63.  controlId: 1,
      64. 
  
  
  
    64.  iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png',
      65. 
  
  
  
    65.  position: {
      66. 
  
  
  
    66.  left: 0,
      67. 
  
  
  
    67.  top: 100,
      68. 
  
  
  
    68.  width: 50,
      69. 
  
  
  
    69.  height: 50
      70. 
  
  
  
    70.  },
      71. 
  
  
  
    71.  clickable: true
      72. 
  
  
  
    72.  }],
      73. 
  
  
  
    73.  circles: [{
      74. 
  
  
  
    74.  latitude: '40.052751',
      75. 
  
  
  
    75.  longitude: '116.278796',
      76. 
  
  
  
    76.  color: '#FF5F41FF',
      77. 
  
  
  
    77.  fillColor: '#21FFFFFF',
      78. 
  
  
  
    78.  radius: '200',
      79. 
  
  
  
    79.  strokeWidth: '2'
      80. 
  
  
  
    80.  }]
      81. 
  
  
  
    81.  },
      82. 
  
  
  
    82.  showLocation() {
      83. 
  
  
  
    83.  this.setData({
      84. 
  
  
  
    84.  showLocation: !this.data.showLocation
      85. 
  
  
  
    85.  });
      86. 
  
  
  
    86.  },
      87. 
  
  
  
    87.  toggle3d() {
      88. 
  
  
  
    88.  this.setData({
      89. 
  
  
  
    89.  enable3d: !this.data.enable3d
      90. 
  
  
  
    90.  });
      91. 
  
  
  
    91.  },
      92. 
  
  
  
    92.  toggleShowCompass() {
      93. 
  
  
  
    93.  this.setData({
      94. 
  
  
  
    94.  showCompass: !this.data.showCompass
      95. 
  
  
  
    95.  });
      96. 
  
  
  
    96.  },
      97. 
  
  
  
    97.  toggleOverlooking() {
      98. 
  
  
  
    98.  this.setData({
      99. 
  
  
  
    99.  enableOverlooking: !this.data.enableOverlooking
      100. 
  
  
  
    100.  });
      101. 
  
  
  
    101.  },
      102. 
  
  
  
    102.  toggleZoom() {
      103. 
  
  
  
    103.  this.setData({
      104. 
  
  
  
    104.  enableZoom: !this.data.enableZoom
      105. 
  
  
  
    105.  });
      106. 
  
  
  
    106.  },
      107. 
  
  
  
    107.  toggleScroll() {
      108. 
  
  
  
    108.  this.setData({
      109. 
  
  
  
    109.  enableScroll: !this.data.enableScroll
      110. 
  
  
  
    110.  });
      111. 
  
  
  
    111.  },
      112. 
  
  
  
    112.  toggleRotate() {
      113. 
  
  
  
    113.  this.setData({
      114. 
  
  
  
    114.  enableRotate: !this.data.enableRotate
      115. 
  
  
  
    115.  });
      116. 
  
  
  
    116.  },
      117. 
  
  
  
    117.  togglePolygon() {
      118. 
  
  
  
    118.  this.setData({
      119. 
  
  
  
    119.  drawPolygon: !this.data.drawPolygon
      120. 
  
  
  
    120.  });
      121. 
  
  
  
    121.  },
      122. 
  
  
  
    122.  onMarkertap(e) {
      123. 
  
  
  
    123.  console.log('onMarkertap callback:', e);
      124. 
  
  
  
    124.  },
      125. 
  
  
  
    125.  onCallouttap(e) {
      126. 
  
  
  
    126.  console.log('onCallouttap callback:', e);
      127. 
  
  
  
    127.  },
      128. 
  
  
  
    128.  onControltap(e) {
      129. 
  
  
  
    129.  console.log('onControltap callback:', e);
      130. 
  
  
  
    130.  },
      131. 
  
  
  
    131.  onRegionchange(e) {
      132. 
  
  
  
    132.  console.log('onRegionchange callback:', e);
      133. 
  
  
  
    133.  },
      134. 
  
  
  
    134.  onTap(e) {
      135. 
  
  
  
    135.  console.log('onTap callback:', e);
      136. 
  
  
  
    136.  },
      137. 
  
  
  
    137.  onUpdated(e) {
      138. 
  
  
  
    138.  console.log('onUpdated callback:', e);
      139. 
  
  
  
    139.  },
      140. 
  
  
  
    140.  onPoitap(e) {
      141. 
  
  
  
    141.  console.log('onPoitap callback:', e);
      142. 
  
  
  
    142.  },
      143. 
  
  
  
      144. 
  
  
  
    144.  /**
      145. 
  
  
  
    145.  * 点击标记点时触发的事件
      146. 
  
  
  
    146.  */ 
      147. 
  
  
  
    147.  bindmarkertap() {
      148. 
  
  
  
    148.  swan.showToast({
      149. 
  
  
  
    149.  title: '点击标记啦',
      150. 
  
  
  
    150.  icon: 'none'
      151. 
  
  
  
    151.  });
      152. 
  
  
  
    152.  },
      153. 
  
  
  
    153. });
      154.

    代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • CSS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  longitude="{{longitude}}"
      5. 
  
  
  
    5.  latitude="{{latitude}}">
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
      9. 
 
 
 
     
 
 
      
  
  
  
    1. .card-area { 
      2. 
  
  
  
    2.  width: 3.88rem;
      3. 
  
  
  
    3.  height: 2.18rem;
      4. 
  
  
  
    4. }
      5.

    marker

    解释：标记点，用于在地图上显示标记的位置。

    属性说明

    属性名 说明 类型 必填 备注
    markerId标记点 idNumber否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文本颜色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默认为居中对齐

    示例

    图片示例

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

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

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

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

    control

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

    属性说明

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

    position 属性说明

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

    示例

    图片示例

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

    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.mswzjz.cn/qtweb/news21/108671.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    虚拟主机知识

    同城分类信息

    抖音短视频　　 　堡垒主机　　 　四川审计公司　　 　响应式网站　　 　成都工装公司　　 　成都400电话办理　　 　重庆app软件开发　　 　联通服务器托管　　 　租用服务器　　 　香港机房服务器托管　　 　成都发电机组维修保养公司　　 　网站改版　　 　乐至网站建设　　 　达州网站建设　　 　大邑珉田数据中心　　 　帛金家居　　 　成都免费做网站公司　　 　广安网站建设　　 　四川平武网站建设　　 　成都移动机房