map

地图。该组件是原生组件，使用时请注意相关限制。 个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通。 设置subkey后，小程序内的地图组件均会使用该底图效果，底图场景的切换会在后续版本提供。 详见《小程序个性地图使用指南》
效果展示

map属性

covers移除markers

markers

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

marker 上的气泡 callout

marker 上的气泡 label

polyline

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

polygons

指定一系列坐标点，根据 points 坐标数据生成闭合多边形，最低版本2.3.0

circles

在地图上显示圆

controls

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

position

注意

• 个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
• 地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA

例如：
效果展示

代码
index.wxml

  
    
  
{{location}}
  移动标注
  移动位置
  缩放地图
  缩放视野展示所有经纬度

index.wxss

.contentView{
  width: 100%
}
.mapView{
  box-sizing: border-box;
  padding:30rpx,30rpx,0,30rpx;
}
button{
  margin: 20rpx;
}

index.js

/*(1)markers属性 标记点用于在地图上显示标记的位置
  id  标记点id marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
  latitude  纬度  浮点数，范围 -90 ~ 90
  longitude   经度  浮点数，范围 -180 ~ 180
  title   标注点名 
  zIndex  显示层级 
  iconPath  显示的图标   项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径和网络图片（2.3.0）
  rotate  旋转角度    顺时针旋转的角度，范围 0 ~ 360，默认为 0
  alpha   标注的透明度  默认1，无透明，范围 0 ~ 1
  width   标注图标宽度    默认为图片实际宽度，单位px（2.4.0起支持rpx）
  height  标注图标高度    默认为图片实际高度，单位px（2.4.0起支持rpx）
  callout   自定义标记点上方的气泡窗口   支持的属性见下表，可识别换行符。 
  label   为标记点旁边增加标签  支持的属性见下表，可识别换行符。 
  anchor  经纬度在标注图标的锚点，默认底边中点  {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点   
  aria-label  无障碍访问，（属性）元素的额外描述
*/
/*(2)marker 上的气泡 callout
  content   文本  
  color   文本颜色  
  fontSize  文字大小  
  borderRadius  边框圆角  
  borderWidth   边框宽度 
  borderColor   边框颜色  
  bgColor   背景色    
  padding   文本边缘留白 
  display   'BYCLICK':点击显示; 'ALWAYS':常显    
  textAlign   文本对齐方式。有效值: left, right, center  
*/
Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    scale: 16,
    location:"获取位置",
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      title: '微信总部',
    }, {
      id: 2,
      latitude: 23.099220,
      longitude: 113.321520,
      iconPath: '/image/location.png',
      callout: {
          content: '自定义点',
          color:'#AD1212',
          bgColor:'#00AD00',   
          fontSize: '20',   
          borderRadius:'5'  
        }
    }],
  },
  //初始化地图
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  //获取位置
  getCenterLocation: function () {
    var that = this
    that.mapCtx.getCenterLocation({
      success: function (res) {
        console.log('经度',res.longitude)
        console.log('纬度',res.latitude)
        that.setData({
          location: '经度:' + res.longitude + '纬度:'+res.latitude
        })
}
    })
},
  scaleClick: function () {
    this.setData({
      scale: 10,
    })
  },
  // 移动位置
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  // 移动标注
  translateMarker: function () {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude: 23.10229,
        longitude: 113.3345211,
      },
      animationEnd() {
        console.log('动画结束')
      }
    })
  },
  //缩放视野展示所有经纬度
  includePoints: function () {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude: 23.10229,
        longitude: 113.3345211,
      }, {
        latitude: 23.00229,
        longitude: 113.3345211,
      }]
    })
  }
})