map 地图

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

# 属性说明

属性名 类型 默认值 必填 说明 最低版本 Web 态说明
longitude Number gcj02 坐标系中心经度 - -
latitude Number gcj02 坐标系中心纬度 - -
scale Number 16 缩放级别,取值范围为4-21 - -
markers Array.<marker> 标记点 - -
polyline Array.<polyline> 路线 - -
polygons Array.<polygon> 多边形(工具暂不支持) 2.0.13
低版本请做兼容性处理
-
circles Array.<circle> - -
controls Array.<control> 控件 - -
include-points Array.<point> 缩放视野以包含所有给定的坐标点 - -
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点时触发 - 暂不支持

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例:

    <view class="wrap">
        <cover-view class="card-area">
            <map class="map"
                longitude="{{longitude}}"
                latitude="{{latitude}}"
                scale="{{scale}}"
                markers="{{markers}}"
                polyline="{{polyline}}"
                polygons="{{drawPolygon ? polygons : []}}"
                circles="{{circles}}"
                controls="{{controls}}"
                show-location="{{show-location}}"
                include-points="{{include-points}}"
                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">
            </map>
        </cover-view>
    </view>
    
    Page({
        data: {
            scale: 16,
            latitude: '40.048828',
            longitude: '116.280412',
            polyline:[],
            circles:[],
            enable3d: false,
            showCompass: false,
            showLocation: true,
            enableOverlooking: false,
            enableZoom: true,
            enableScroll: true,
            enableRotate: false,
            drawPolygon: false,
            enableSatellite: false,
            enableTraffic: false,
            markers: [{
                markerId: '1',
                latitude: '40.052751',
                longitude: '116.278796'
            }, {
                markerId: '2',
                latitude: '40.048828',
                longitude: '116.280412',
                callout: {
                    display: 'ALWAYS',
                    content: '百度科技园'
                }
            }, {
                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'
            }]
        },
        onReady() {
            this.mapContext = swan.createMapContext('myMap');
        },
        toggle3d() {
            this.setData({
                enable3d: !this.data.enable3d
            })
        },
        toggleShowCompass() {
            this.setData({
                showCompass: !this.data.showCompass
            })
        },
        toggleRotate() {
            this.setData({
              enableRotate: !this.data.enableRotate
            })
        },
        togglePolygon() {
            this.setData({
              drawPolygon: !this.data.drawPolygon
            })
        },
        toggleSatellite() {
            this.setData({
              enableSatellite: !this.data.enableSatellite
            })
        },
        toggleTraffic() {
            this.setData({
              enableTraffic: !this.data.enableTraffic
            })
        },
        demoCircle() {
            this.setData({
                scale: 16,
                longitude,
                latitude,
                circles: [{
                latitude: '40.048828',
                longitude: '116.280412',
                color: '#BB76FF88',
                fillColor: '#BB76FF33',
                radius: 100,
                strokeWidth:3,
                }]
            });
        },
        toggleOverlooking() {
            this.setData({
              enableOverlooking: !this.data.enableOverlooking
            })
        },
        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);
        }
    });
    

    # markers

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

    # 属性说明

    属性名 说明 类型 必填 备注
    markerId 标记点id Number marker点击事件回调会返回此id。建议为每个marker设置Number类型的id,保证更新marker时有更好的性能。
    latitude 纬度 Number 浮点数,范围 -90 ~ 90
    longitude 精度 Number 浮点数,范围 -180 ~ 180
    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 文本颜色 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 默认为居中对齐

    # 参考示例

    # 图片示例

    # 代码示例:

    在开发者工具中预览效果

      <view class="wrap">
          <map
              style="width: 100%; height: 300px;"
              longitude="{{longitude}}"
              latitude="{{latitude}}"
              markers="{{markers}}"
              bindmarkertap="bindmarkertap"
              bindcallouttap="bindcallouttap">
          </map>
      </view>
      
      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 ``

      # 示例

      # 图片示例

      # 代码示例

      在开发者工具中预览效果

        <view class="wrap">
            <map
                style="width: 100%; height: 300px;"
                longitude="{{longitude}}"
                latitude="{{latitude}}"
                polyline="{{polyline}}">
            </map>
        </view>
        
        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 ``

        # 示例

        # 图片示例

        # 代码示例

        在开发者工具中预览效果

          <view class="wrap">
              <map
                  style="width: 100%; height: 300px;"
                  longitude="{{longitude}}"
                  latitude="{{latitude}}"
                  polygons="{{polygons}}">
              </map>
          </view>
          
          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 ``

          # 示例

          # 图片示例

          # 代码示例

          在开发者工具中预览效果

            <view class="wrap">
                <map
                    style="width: 100%; height: 300px;"
                    longitude="{{longitude}}"
                    latitude="{{latitude}}"
                    circles="{{circles}}">
                </map>
            </view>
            
            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 默认为图片高度

            # 示例

            # 图片示例

            # 代码示例

            在开发者工具中预览效果

              <view class="wrap">
                  <map
                      style="width: 100%; height: 300px;"
                      longitude="{{longitude}}"
                      latitude="{{latitude}}"
                      controls="{{controls}}"
                      bindcontroltap="bindcontroltap"
                      >
                  </map>
              </view>
              
              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'
                      })
                  }
              });
              

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

              在开发者工具中预览效果

                <view class="wrap">
                    <cover-view class="card-area">
                        <map
                            longitude="{{longitude}}"
                            latitude="{{latitude}}">
                        </map>
                    </cover-view>
                </view>
                
                .card-area { 
                    width: 3.88rem;
                    height: 2.18rem;
                }
                

                # 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:开发者工具由于坐标系不同,定位与客户端存在差异。开发时请以客户端为准。
                • Bug: Web 态由于坐标系不同,定位与客户端存在差异,坐标与客户端相比有一定偏移。待后续版本修复。