如何在Android中借助Google Maps API添加静态方格网格？

Hey there! Since you're new to working with the Google Maps API on Android and need to draw a static grid of squares on the map, I’ve put together a step-by-step guide with code snippets to help you get this done.

Google Maps uses latitude/longitude coordinates, so your grid squares will be defined by these values. The key quirk here is that the distance represented by a degree of longitude changes with latitude—so we’ll use geographic math tools to calculate consistent square sizes (e.g., 1000 meters per side) across the map.

First, make sure you have the necessary libraries added to your app-level build.gradle (or build.gradle.kts):

implementation 'com.google.android.gms:play-services-maps:18.2.0'
implementation 'com.google.maps.android:maps-utils:2.9.0'

The Maps Utilities library gives us handy tools for geographic calculations, which will save you from writing complex math from scratch. Also, double-check that you’ve set up your Google Maps API key in your manifest and have a SupportMapFragment or MapView in your layout.

Use the SphericalUtil class from the utilities library to figure out how much latitude/longitude you need to shift to create squares of your desired size:

// Define your target square size in meters
val gridSquareSizeMeters = 1000.0

// Use a reference point (could be the map's center or a fixed location)
val referencePoint = LatLng(39.9042, 116.4074) // Beijing as an example

// Calculate latitude delta (how much lat changes when moving north by gridSquareSizeMeters)
val northPoint = SphericalUtil.computeOffset(referencePoint, gridSquareSizeMeters, 0.0)
val latDelta = northPoint.latitude - referencePoint.latitude

// Calculate longitude delta (how much lng changes when moving east by gridSquareSizeMeters)
val eastPoint = SphericalUtil.computeOffset(referencePoint, gridSquareSizeMeters, 90.0)
val lngDelta = eastPoint.longitude - referencePoint.longitude

Next, define the area you want to cover (we’ll use the map’s visible region here) and generate the four corners for each square:

// Get the current visible bounds of the map
val visibleRegion = googleMap.projection.visibleRegion
val minLat = minOf(visibleRegion.farLeft.latitude, visibleRegion.nearLeft.latitude)
val maxLat = maxOf(visibleRegion.farRight.latitude, visibleRegion.nearRight.latitude)
val minLng = minOf(visibleRegion.farLeft.longitude, visibleRegion.farRight.longitude)
val maxLng = maxOf(visibleRegion.nearLeft.longitude, visibleRegion.nearRight.longitude)

// Generate all grid squares in the visible area
val gridSquares = mutableListOf<List<LatLng>>()
var currentLat = minLat
while (currentLat < maxLat) {
    var currentLng = minLng
    while (currentLng < maxLng) {
        // Define the 4 corners of the square (SW, NW, NE, SE)
        val squareCorners = listOf(
            LatLng(currentLat, currentLng),
            LatLng(currentLat + latDelta, currentLng),
            LatLng(currentLat + latDelta, currentLng + lngDelta),
            LatLng(currentLat, currentLng + lngDelta)
        )
        gridSquares.add(squareCorners)
        currentLng += lngDelta
    }
    currentLat += latDelta
}

Use Google Maps’ Polygon class to render each square. You can customize the border style and fill transparency to fit your project:

// Clear any existing polygons first (important if you plan to update the grid later)
googleMap.clear()

// Render each square on the map
gridSquares.forEach { square ->
    val polygonOptions = PolygonOptions()
        .addAll(square)
        .strokeColor(Color.BLUE)
        .strokeWidth(2f)
        .fillColor(Color.argb(30, 0, 0, 255)) // Semi-transparent blue fill
    
    googleMap.addPolygon(polygonOptions)
}

If you want the grid to adjust automatically when the user pans or zooms, add a camera idle listener:

googleMap.setOnCameraIdleListener {
    // Re-run steps 4 and 5 here to regenerate and redraw the grid
}

• Adjust grid size with zoom: Use the map’s zoom level to change square size—smaller squares for close-up zooms, larger squares for faraway views—to avoid rendering too many polygons at once.
• Reuse polygons: Instead of clearing and redrawing all polygons every time, update existing ones if possible to reduce overhead.

内容的提问来源于stack exchange，提问作者joseph