How to achieve Place Search and Marker Clustering Implementation in Map App
Introduction
Lots of apps these days include an in-app map feature and the ability to mark places of interest on the map. HMS Core Map Kit enables you to implement such capabilities for your apps. With Map Kit, you can first draw a map and then add markers to the map, as well as configure the map to cluster markers depending on the level of zoom. This article will show you how to implement searching for nearby places using the keyword search capability of Site Kit and display the results on the map.
Application scenarios:
- A travel app that allows users to search for scenic spots and shows the results on a map.
- 2.A bicycle sharing app that can show users nearby bicycles on a map.
Key functions used in the project:
- Location service: Use Location Kit to obtain the current longitude-latitude coordinates of a device.
- Keyword search: Use Site Kit to search for places such as scenic spots, businesses, and schools in the specified geographical area based on the specified keyword.
- Map display: Use Map Kit to draw a map. Marker clustering: Use Map Kit to add markers to the map and configure the map to cluster markers depending on the level of zoom.
Integration Preparations
- Register as a developer and create a project in AppGallery Connect.
Register as a developer Registration URL
(2)Create an app, add the SHA-256 signing certificate fingerprint, enable Map Kit and Site Kit, and download the agconnect-services.json file of the app.
2.Integrate the Map SDK and Site SDK.
(1)Copy the agconnect-services.json file to the app’s directory of your project.
- Go to allprojects > repositories and configure the Maven repository address for the HMS Core SDK.
- Go to buildscript > repositories and configure the Maven repository address for the HMS Core SDK.
- If the agconnect-services.json file has been added to the app, go to buildscript > dependencies and add the AppGallery Connect plugin configuration.
(2) Add build dependencies in the dependencies block.
(3) Add the following configuration to the file header:
(4) Copy the signing certificate generated in Generating a Signing Certificate to the app directory of your project, and configure the signing certificate in android in the build.gradle file.
Main Code and Used Functions
- Use Location Kit to obtain the device location.
2. Implement the text search function using Site Kit to search for nearby places.
3. Draw a map.
4. Cluster markers on the map.
Results
Enter a place or service in the Query box and tap Search. The figures below show how the search results are displayed as markers on the map.
The preceding four figures show the effect of searching for food and school, as well as the marker clustering effect at different zoom levels.
Conclusion
Congratulations, you have now successfully integrated place search and marker clustering into your in-app map.
References
https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Votes
