微信小程序地图 map

基础库 1.0.0 开始支持，低版本需做兼容处理。

地图（v2.7.0 起支持同层渲染）。相关api wx.createMapContext。

个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通。 小程序内地图组件应使用同一 subkey，可通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

示例小程序

regionchange 返回值

视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin / end。

2.8.0起 begin 阶段返回 causedBy，有效值为 gesture（手势触发） & update（接口触发）

2.3.0起 end 阶段返回 causedBy，有效值为 drag（拖动导致）、scale（缩放导致）、update（调用更新接口导致） rotate、skew仅在 end 阶段返回

e = {
  causedBy,
  type,
  detail: {
    rotate,
    skew
  }
}

setting

提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。

// 默认值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: -1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}

this.setData({
  // 仅设置的属性会生效，其它的不受影响
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker

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

marker 上的气泡 callout

marker 上的气泡 label

polyline

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

polygon

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

circle

在地图上显示圆

control

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

position

bindregionchange 返回值

Bug & Tip

1. tip：个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
2. tip：地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA
3. tip：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
4. tip: map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02
5. tip：从 2.8.0 起 map 支持同层渲染，更多请参考原生组件使用限制
6. tip：请注意原生组件使用限制。

比例尺

示例代码

在开发者工具中预览效果

<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

// map.js
Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.detail.markerId)
  },
  controltap(e) {
    console.log(e.detail.controlId)
  }
})