支付宝小程序组件 地图·Map

支付宝小程序Map（地图）。

API

markers

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

polygon

用于构造多边形对象

polyline

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

circles

用于在地图上显示圆

controls

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

position

地图组件的经纬度是必填的, 如果不填经纬度默认是北京的经纬度。

Screenshot

示例

  
  改scale
  getCenterLocation
  moveToLocation
  改center
  改markers

Page({
  data: {
    scale: 14,
    longitude: 120.131441,
    latitude: 30.279383,
    markers: [{
      iconPath: "/image/green_tri.png",
      id: 10,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50
    }],
    includePoints: [{
      latitude: 30.279383,
      longitude: 120.131441,
    }],
    polyline: [{
      points: [{
        longitude: 120.131441,
        latitude: 30.279383
      }, {
        longitude: 120.128821,
        latitude: 30.278200
      }, {
        longitude: 120.131618,
        latitude: 30.277600
      }, {
        longitude: 120.132520,
        latitude: 30.279393
      }, {
        longitude: 120.137517,
        latitude: 30.279383
      }],
      color: "#FF0000DD",
      width: 5,
      dottedLine: false
    }],
    circles: [{
      latitude: 30.279383,
      longitude: 120.131441,
      color: "#000000AA",
      fillColor: "#000000AA",
      radius: 80,
      strokeWidth: 5,
    }],
    controls: [{
      id: 5,
      iconPath: '../../resources/pic/2.jpg',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },

  onReady(e) {
    // 使用 my.createMapContext 获取 map 上下文
    this.mapCtx = my.createMapContext('map')
  },

  getCenterLocation() {
    this.mapCtx.getCenterLocation(function (res) {
      console.log(res.longitude)
      console.log(res.latitude)
    })
  },

  moveToLocation() {
    this.mapCtx.moveToLocation()
  },

  regionchange(e) {
    console.log('regionchange', e);
    // 注意：如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
    // scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
    if (e.type === 'end') {
      this.setData({
        scale: e.scale
      });
    }
  },

  markertap(e) {
    console.log('marker tap', e);
  },

  controltap(e) {
    console.log('control tap', e);
  },

  tap() {
    console.log('tap:');
  },

  changeScale() {
    this.setData({
      scale: 8,
    });
  },

  changeCenter() {
    this.setData({
      longitude: 113.324520,
      latitude: 23.199994,
      includePoints: [{
        latitude: 23.199994,
        longitude: 113.324520,
      }],
    });
  },

  changeMarkers() {
    this.setData({
      markers: [{
        iconPath: "/image/green_tri.png",
        id: 10,
        latitude: 21.21229,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      includePoints: [{
        latitude: 21.21229,
        longitude: 113.324520,
      }],
    });
  },
})

Tips

• map 组件是由客户端创建的原生组件，它的层级是最高的。
• 请勿在 scroll-view 中使用 map 组件。
• css 动画对 map 组件无效。
• 如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的 scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小，具体请参照上面的示例代码 regionchange 函数部分。

关注微信下载离线手册