Did you know that you can play with the map under the mini program in this way?

The rapid development of the mini program ecosystem in recent years is obvious to all. As mini programs become increasingly integrated with offline scenarios, map functions have become the "standard configuration" of more and more mini programs.

Tencent Location Services has been providing underlying map support for WeChat and Mini Programs. At the same time, we have also been working closely with WeChat to continuously strengthen and enrich our map capabilities under Mini Programs, upgrade developers' "toolbox" and "arsenal", and meet the needs of Mini Program developers for map capabilities in different business scenarios.

Map API function upgrade

Recently, Mini Programs have added several new functions to the Map API, including moveAlong, initMarkerCluster, etc.

moveAlong

moveAlong helps developers to move the marker along a specified path, and the marker direction can be rotated to match the route direction. It is mainly used in scenarios such as trajectory playback and simultaneous display of drivers and passengers. If the animation is in progress and the moveAlong method is called again for the same marker, the previous animation will be interrupted. At the same time, the speed of trajectory playback can be set by setting the duration of smooth movement.

initMarkerCluster

initMarkerCluster is the point aggregation capability. When there are too many markers to be displayed on the map, the markers on the interface may be overlapped, the display may be incomplete, and the overall performance may deteriorate, and users may experience lags. To address this problem, the point aggregation capability is introduced to display a large number of Makers in an aggregated manner. For example, in a large chain store scenario, when a user searches for a chain store of a certain brand in a region or even a city, when the map is zoomed in to view the entire city, the point aggregation capability can automatically merge adjacent points on the map to achieve the best display effect.

openMapApp

openMapApp is used to directly call up the list of map apps installed by the user, similar to the scenario when sending a location via WeChat, to enable users to jump to other map apps to complete route planning or navigation. In previous usage scenarios, users could not directly jump to the map app through the mini program. They had to go to WeChat to select a point and then jump to the app. Not only was the process cumbersome, but when jumping to the map app, the starting and ending locations were not carried, making route planning impossible. Currently, this function can perfectly solve this problem. Users can directly pull up the map app in their mini program and display the route planning from the starting point to the end point.

fromScreenLocation and toScreenLocation

The mini program provides a set of new APIs to help developers convert screen coordinates to longitude and latitude. fromScreenLocation can get the longitude and latitude corresponding to a point on the screen, and toScreenLocation can get the screen coordinates corresponding to the longitude and latitude.

includePoints

includePoints means zooming the view to display all POIs. When there are multiple POIs on the map and only some of them are displayed, the includePoints capability can be used to automatically zoom the map view to include all points, and padding can be used to set the distance from the edge of the rectangle formed by the coordinate points to the edge of the map to achieve the best display effect.

Map component optimization

Map Vision Control

The map view control of the applet Map component supports zoom, pitch, 3D building speed and other controls, and also supports traditional gestures such as left and right, zoom in and out to control the map view change. At the same time, the recently added "zoom level" function can control the view zoom range of 3-20 levels to prevent users from changing the map view too much or too little, resulting in poor map display and affecting user experience.

Covering-Rainbow Line

Added rainbow line capability. In route planning scenarios, developers can use this capability to report road congestion conditions, with red for congestion, yellow for slow traffic, and green for smooth traffic. As a line attribute, rainbow line conflicts with solid line and dashed line.

Map search is now available

In order to build a complete LBS application, in addition to the map display function, the map search capability is also indispensable. We have launched a series of services on the WeChat open community service platform, including 4 POI data categories (reverse address resolution, address resolution, location search, keyword input prompt), 2 route planning categories (driving route planning, walking route planning), and 1 coordinate tool category (coordinate conversion), covering most map application scenarios.

Considering the needs of many developers to expand the overseas market of WeChat Mini Programs, we also provide overseas location interface services on the Tencent Location Service official website, including eight overseas service capabilities: map, positioning, address resolution, reverse address resolution, location search, surrounding search, surrounding recommendation, and route planning. Developers can enjoy the ultimate experience of seamless switching between domestic and overseas maps with one access, achieving "one access, global access".

Route planning plug-in optimization and upgrade

The route planning plug-in has recently upgraded its capabilities including navigation, real-time public transportation, and theme colors.

Navigation: If route planning is for "seeing the route", then navigation is for "using the route". The newly added navigation capability improves the embarrassing situation of route planning that can only be seen but not used, and opens up the conventional driving process of inputting the destination -> selecting the best route -> jumping to navigation. Users can pull up the map app by clicking on the navigation, realizing a seamless connection between the mini program and the map app.

Real-time public transportation: Among the products currently available to the public in Tencent's location services, only the route planning plug-in provides real-time public transportation capabilities. Developers can help users understand the arrival time of the next bus and the number of remaining stops. Real-time public transportation improves the plug-in's service capabilities in the field of public transportation, allowing users to no longer "wait for the bus".

Theme color: Developers can change the colors of fonts, lines, buttons, color blocks, etc. in the plug-in by setting the theme color. The changed plug-in style can be perfectly integrated into the developer's mini-program, keeping its overall style consistent, and the user experience will no longer be reduced due to the abruptness of the plug-in color.

Personalized basemap supports dynamic switching

The personalized basemap switching capability is now available. You can use the same subkey in the mini program, select different basemap styles through the layer-style (the style number set on the map official website) attribute, and switch styles dynamically. For example, use light-colored maps during the day and WeChat dark-colored maps at night. Taking the following demo as an example, you can achieve dynamic switching of four styles: style1-travel, style2-WeChat dark, style3-Danyue, and style4-Jade Dew.

Sample Center Mini Program - The best assistant for mini program map development

In order to help mini program developers better understand and use these map capabilities, we have developed a sample center mini program that has two major functions:

Demonstrate map capabilities: All map-related capabilities under the mini program are categorized, the directory structure is sorted out, and detailed explanations are given one by one; at the same time, each capability is equipped with a demo example, allowing developers to experience the actual effect and deepen their understanding.

Reduce development costs: For each demo example, we also provide high-quality source code. Developers can jump to GitHub by clicking "View Source Code" on the homepage. The document directory is displayed according to the structure of the example center, which is convenient for directly copying the code for local debugging, allowing developers to achieve zero-cost development.

For such a thoughtful little assistant, quickly scan the small program code below to experience it immediately!