Google Maps API - 多边形的不同地图样式

Question

我想达到类似于这里呈现的效果：

在 Android 谷歌地图内。多边形应具有与地图其余部分不同的地图样式（json 文件）。有没有办法做到这一点？ 我什至会接受拥有两张不同的地图（一张在另一张下方）并将多边形从顶部地图中切出。那可能吗？

Answer 1

使用Polygon.setHoles() 或PolygonOptions.addHole() 方法可以实现这种效果。您应该为所有地图（纬度从 -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 对象。

更新

对于“hole-in-hole”案例和“night-and-day”，您应该将 .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));
}

你得到了类似的东西：

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