WeChat small program map map

Base library 1.0.0 starts to support, and low versions need to be compatible.

Maps (v2.7.0 supports same-layer rendering). Related api wx.createMapContext.

Personalized map capabilities can be launched in the background of small programs "development-developer tools-Tencent location services". T he in-program map component should use the same subkey, and different basemap styles can be selected through the layer-style (style number set on the map's official website) property. The length units of component properties default to px, with 2.4.0 supporting incoming units (rpx/px).

Example small program

Regionchange returns a value

When the field of view changes, the regionchange is triggered twice and the type value returned is begin/end.

2.8.0 start stage returns causedBy with a valid value of gesture (gesture trigger) and update (interface trigger)

2.3.0 end stage returns causedBy, valid values are drag (drag caused), scale (scale caused), update (call update interface caused) rotate, skew only returns in the end stage

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

setting

Provides a unified map configuration for setting objects. At the same time, for some animation properties such as rotate and skew, setting separately with setData does not take effect at the same time and needs to be modified uniformly by 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 points are used to display the location of markers on the map

Bubble callout on marker

Bubble label on marker

polyline

Specifies a series of coordinate points, from the first item of the array to the last item

polygon

Specify a series of coordinate points to generate closed polygons based on points coordinate data

circle

Show the circle on the map

control

Displays controls on the map that do not move with the map. To be abandoned, use cover-view

position

Bindregionchange returns a value

Bug & Tip

1. tip: Personalized maps do not support debugging in tools at this time. Please test with the WeChat client first.
2. tip: Color values in the map, such as color/borderColor/bgColor, need to be represented by 6 bits (8 bits) heteen, and the last two of the 8 bits represent alpha values, such as #000000AA
3. tip: The latitude and longitude of the map assembly is required, and if you do not fill in the longitude and latitude, the default value is the latitude and longitude of Beijing.
4. tip: The map component uses a Martian coordinate system, and calling the wx.getLocation interface requires specifying type as gcj02
5. tip: Map supports same-layer rendering from 2.8.0, please refer to native component usage restrictions for more information
6. tip: Be aware of the restrictions on the use of native components.

Scale

The sample code

Preview the effect in the developer tool

<!-- 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)
  }
})