words written in front
The company's project needs to implement the function of map marker point aggregation on the WeChat applet. Baidu searched hard to no avail, so it realized it by itself.
The final effect
sample code point me to get
core idea
- The callout attribute in the marker tag is used to display the number of aggregation points
- When the aggregation point is clicked, the map will be enlarged centered on the aggregation point, and there is no need to request the background interface again
- Divide the map into small grids one by one according to the zoom level of the map component scale, and calculate the number of marker points in the small grids
- Since the applet cannot handle a huge amount of data like the web page, in order to improve the user experience, the last marker data is cached when the map state is zoomed or the range is reduced, and there is no need to request the background interface
key js file
- MapUtil.js (judging whether it is in the zoom state, formatted into map aggregation type marker data according to the background interface data, etc.)
- ZjMarker.js (maker point base class, build single marker and aggregate marker according to simple parameters)
Implementation
MapUtil.js