# map

Start from base library version 1.0.0. Please remaining backward compatible.

Map (v2.7.0 Rise support Same-layer rendering, related api wx.createMapContext。

# Mini Program solution

In addition to this chapter introduces the basic properties of the Mini Program map, Tencent location services launched"WeChat Mini Program Solution", from the retrieval API, basic map components, personalization, plug-ins, industry solutions and other levels, for different scenarios demand Mini Program developers to provide complete map capabilities.

# Personalized map

Personalized map style is an advanced capability of Tencent Location Services, developers can use their own products according to the use of the scene, UI style, Select or create a style matching map style. Within the Mini Program map component, use the same Subkey, available through Layer-style (style of location service website settings style Property configuration and support for dynamic switching styles. The unit of length of the component attribute defaults to px,2.4.0 to support incoming units(rpx/px)。 For details see:Personalized Map Guide

# Mini Program plugin

Tencent Location Services, based on WeChat's ability to plug in mini-programs, focuses on (around) the map function, creating a series of mini-program plug-ins, which can help developers build mini-programs easily and quickly, is the best partner for you to achieve map function. At present, the plug-in provides route planning, subway map, map selection services, details see:Mini Program Map Plug-in Guide。

# Map retrieval

Tencent Location ServicesWeChat open community service platform launched a series of map retrieval services, It contains 4 POI data classes (Inverse Address Resolution, Location Search, Keyword Input Prompt), 2 route planning classes (driving route planning, walking route planning), 1 coordinate tool class (coordinate transformation), Covers most of the map application scenarios. Or log on to the location service website.Web service usage guide for details. WeChat mini program developers can use overseas maps for display, if you need overseas search ability, you canOverseas location services to apply.

# Mini Program sample center

Contains Map components, APIs, plug-ins and other functions to use methods, a comprehensive understanding of the Mini Program under all maps capabilities. Sample content source code open, reduce the developer access costs.

# Recent additions

1. Support point aggregation for marker too many scenarios.
2. Support rainbow earthworm line, commonly used in route planning scenarios.
3. Overlay supports adjusting overlay relationships with other map elements.
4. Support marker (car) translation animation, suitable for track playback scene.

# Map base attribute

# regionchange Return value

When the field of vision changes, the region changes It triggers twice and returns. type The values are begin and end。

2.8.0 rise begin Phase return CausedBy with a valid value of Gestural (gesture triggering) & Update (interface trigger)

2.3.0 rise end Phase return CausedBy with a valid value of Drag (drag), scale (scale), update (call update interface).

and = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}

# setting

provide setting Object to uniformly set the map configuration. At the same time for animation properties such as rotate and skewThrough setData Cannot take effect simultaneously when setting separately. You need to go through the settting Uniform revision.

// Default value
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({
  // Only the properties set will take effect, the rest will not be affected
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

# marker

Marker points are used to display the location of markers on a map

# marker Bubbles on top callout

# marker Custom bubbles on customCallout

customCallout When present, will ignore callout and title Property. Custom Bubble Adoption cover-view Customization, higher flexibility.

The manner of use is as follows,map Component to add the name named callout of slot Node and its internal cover-view adopt marker-id Property and marker Binding. when marker When created, the cover-view The content displayed will be treated as callout Is displayed above the marker point.

<map>
  <cover-view slot="callout">
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

Example DEMO ： https://developers.WeChat.qq.with/s/cZWIojm47pjN

# marker Bubbles on top label

# Dot polymerization

When the marker points on the map need to be displayed marker Too much can result in an interface marker The presence of a gland, incomplete display, and lead to poor overall performance. For this kind of problem, the point aggregation capability is introduced.

The process is as follows:

1. MapContext.initMarkerCluster Initialize configuration of aggregation points (optional)
2. MapContext.addMarkers Specifies that the aggregate marker
3. MapContext.on('markerClusterCreate', callback) When triggered, by MapContext.addMarkers Update the style of the cluster (optional)
4. MapContext.removeMarkers Removes the item participating in the aggregation marker

# sample code

Preview with Developer Tool

Note that:

1. On the map. marker Divided into ordinary marker And those involved in aggregation Marker, specify properties when participating in the aggregation joinCluster for true
2. When you customize the cluster style, you also use the MapContext.addMarkers To draw, at which point you need to carry clusterId。

# polyline

Specifies a series of coordinates, wired from the first item in an array to the last item. When drawing a rainbow line, specify the colors of the different segments, such as points Contain 5 Point, then colorList Should be introduced 4 Color valueif colorList Length less than points.length - 1, then the remaining segment color is the same as the last item.

level Field represents a gland relationship with other map elements, with optional values as follows

# polygon

Specifies a series of coordinates, based on the points Coordinate data generating closed polygon

# circle

Show circles on a map

# control

Displays controls on a map without moving with the map.About to be discarded, please use cover-view

# position

# bindregionchange Return value

# scale

# sample code

Preview with Developer Tool

# Bug & Tip

1. tipCustom maps do not support debugging in tools. Please use the WeChat client to test.
2. tipColor: color value in maps/borderColor/BgColor, etc., uses a 6-bit (8-bit) hexadecimal representation, with the last two bits representing alpha values when 8-bit, such as:#000000AA
3. tip: The latitude and longitude of the map component must be filled, If you do not fill in the latitude and longitude then the default value is Beijing's longitude and latitude.
4. tip: map The latitude and longitude component uses a martian coordinate system, calling the wx.getLocation Interface needs to be specified type for gcj02
5. tip:: from 2.8.0 rise map Support same layer rendering, please refer to[Native component usage limits]((native-component#Native component usage restrictions)
6. tipPlease note that[Native component usage limits](./native-component.md#Restrictions on the use of native components).