android - Google Maps API - 多边形的不同 map 样式

Question

我想实现类似于此处呈现的效果:

在 Android 谷歌地图中。多边形应具有与 map 其余部分不同的 map 样式(json 文件)。有办法吗？我什至会接受有两个不同的 map (一个在另一个下面)并将多边形从顶部 map 中切出。那可能吗？

Answer 1

使用 Polygon.setHoles() 或 PolygonOptions.addHole() 方法可以实现这种效果。您应该为所有 map (从 -90 到 90 度纬度和从 -180 到 180 度经度)创建灰色透明多边形，并为每个地形位置创建孔。像这样:

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    private static final String TAG = MainActivity.class.getSimpleName();
    private GoogleMap mGoogleMap;
    private MapFragment mMapFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map_fragment);
        mMapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mGoogleMap = googleMap;

        List<List<LatLng>> holes = new ArrayList<>();

        // "hole" for Hyde Park
        List<LatLng> hole = new ArrayList<>();
        hole.add(new LatLng(51.509869, -0.191208));
        hole.add(new LatLng(51.513287, -0.158464));
        hole.add(new LatLng(51.505540, -0.151769));
        hole.add(new LatLng(51.502178, -0.174471));
        hole.add(new LatLng(51.502444, -0.187989));
        holes.add(hole);

        // "hole" for Regent's Park
        hole = new ArrayList<>();
        hole.add(new LatLng(51.530226, -0.167685));
        hole.add(new LatLng(51.534924, -0.163737));
        hole.add(new LatLng(51.537566, -0.151849));
        hole.add(new LatLng(51.535964, -0.146914));
        hole.add(new LatLng(51.525325, -0.145625));
        hole.add(new LatLng(51.523589, -0.155538));
        holes.add(hole);

        mGoogleMap.addPolygon(createPolygonWithHoles(holes));

        mGoogleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.519454, -0.168869), 14));
    }

    private static List<LatLng> createBoundsOfEntireMap() {
        final float delta = 0.01f;

        return new ArrayList<LatLng>() {{
            add(new LatLng(90 - delta, -180 + delta));
            add(new LatLng(0, -180 + delta));
            add(new LatLng(-90 + delta, -180 + delta));
            add(new LatLng(-90 + delta, 0));
            add(new LatLng(-90 + delta, 180 - delta));
            add(new LatLng(0, 180 - delta));
            add(new LatLng(90 - delta, 180 - delta));
            add(new LatLng(90 - delta, 0));
            add(new LatLng(90 - delta, -180 + delta));
        }};
    }

    static PolygonOptions createPolygonWithHoles(List<List<LatLng>> holes) {
        PolygonOptions polyOptions = new PolygonOptions()
                .fillColor(0x33000000)
                .addAll(createBoundsOfEntireMap())
                .strokeColor(0xFF000000)
                .strokeWidth(5);

        for (List<LatLng> hole : holes) {
            polyOptions.addHole(hole);
        }

        return polyOptions;
    }

}

你会得到类似的东西:

您还需要位图圆圈作为多边形顶点的标记或将其绘制为 Circle 对象。

更新

对于“洞中洞”的情况和“日夜”，您应该将 .fillColor(0x33000000) 更改为更暗，例如.fillColor(0xDD000000) 并在“第一个”多边形上添加带孔的多边形。像这样:

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    List<List<LatLng>> holes = new ArrayList<>();

    // "hole" for Hyde Park
    List<LatLng> hole = new ArrayList<>();
    hole.add(new LatLng(51.509869, -0.191208));
    hole.add(new LatLng(51.513287, -0.158464));
    hole.add(new LatLng(51.505540, -0.151769));
    hole.add(new LatLng(51.502178, -0.174471));
    hole.add(new LatLng(51.502444, -0.187989));
    holes.add(hole);

    // "hole" for Regent's Park
    hole = new ArrayList<>();
    hole.add(new LatLng(51.530226, -0.167685));
    hole.add(new LatLng(51.534924, -0.163737));
    hole.add(new LatLng(51.537566, -0.151849));
    hole.add(new LatLng(51.535964, -0.146914));
    hole.add(new LatLng(51.525325, -0.145625));
    hole.add(new LatLng(51.523589, -0.155538));
    holes.add(hole);

    mGoogleMap.addPolygon(createPolygonWithHoles(holes));

    List<LatLng> holesInHolesPoly = new ArrayList<>();
    holesInHolesPoly.add(new LatLng(51.508184, -0.177805));
    holesInHolesPoly.add(new LatLng(51.509759, -0.164373));
    holesInHolesPoly.add(new LatLng(51.504549, -0.162399));
    holesInHolesPoly.add(new LatLng(51.503453, -0.177934));

    List<LatLng> holesInHolesHole = new ArrayList<>();
    holesInHolesHole.add(new LatLng(51.505883, -0.172999));
    holesInHolesHole.add(new LatLng(51.507992, -0.171025));
    holesInHolesHole.add(new LatLng(51.506308, -0.169738));

    hole = new ArrayList<>();
    hole.add(new LatLng(51.530226, -0.167685));

    PolygonOptions holeInHoles = new PolygonOptions()
            .fillColor(0xDD000000)
            .addAll(holesInHolesPoly)
            .addHole(holesInHolesHole)
            .strokeColor(0xFF000000)
            .strokeWidth(5);

    mGoogleMap.addPolygon(holeInHoles);

    mGoogleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.519454, -0.168869), 14));
}

你有类似的东西:

这不是解决方案，而是非常好的解决方法。或者您可以为整个 map 设置“夜间”样式，并使用带有“白天”位图的自定义 TileProvider 或 GroundOverlay。无论如何 - 似乎没有“正常”的方式来为 map 的多边形部分创建自定义样式。