Question

我正在从事GoogleMap活动。在我的onMapReady(...)中，我想关注地图的特定部分。我可以通过使用polygon来在地图上表示此部分，如下所示：

Polygon polygon = mMap.addPolygon(new PolygonOptions()
            .add(new LatLng(6.455770, 3.514651), new LatLng(6.455087, 3.547698), new LatLng(6.430651, 3.541926), new LatLng(6.435339, 3.513149))
            .strokeColor(Color.RED));

上面的代码段完全符合我的预期。但是，我想再说一遍。我想淡出地图的其他所有部分（可能带有暗淡的叠加层），并仅关注该多边形。通过“ 仅专注于该多边形”，“ Via”应用中的此屏幕截图最能代表我的意思。

我想在地图上除多边形内的区域之外的所有地方创建一个无光蒙版。我在文档中搜索了可用于实现此目标的方法，但这是徒劳的。任何帮助将不胜感激。

Answer 1

这里是一个示例（使用Javascript API）。这个想法在Android中将完全相同。

在墨卡托投影上，最大北纬不是90，而是大约85.05113。在JavaScript中，您可以执行以下操作：

Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

这样，您可以找到投影的真实南北边缘（用多边形覆盖整个世界）。

然后，您需要创建至少1个多边形（其中带有孔）才能获得所需的效果。如果需要对区域进行着色，则需要第二个多边形（请参见第二段）。

function initialize() {

    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    
    // Find the min/max latitude
    var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

    var worldCoords = [
    new google.maps.LatLng(-maxLat, -180),
    new google.maps.LatLng(maxLat, -180),
    new google.maps.LatLng(maxLat, 180),
    new google.maps.LatLng(-maxLat, 180),
    new google.maps.LatLng(-maxLat, 0)];

    var EuropeCoords = [
    new google.maps.LatLng(29.7, -23.7),
    new google.maps.LatLng(29.7, 44.8),
    new google.maps.LatLng(71.8, 44.8),
    new google.maps.LatLng(71.8, -23.7)];

    // Construct the polygon
    var poly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#000000',
        fillOpacity: 0.2
    });

    poly.setMap(map);
}

#map-canvas {

  height: 200px;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async differ src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>
<div id="map-canvas"></div>

第二个示例，彩色区域为多边形：

function initialize() {

    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    
    // Find the min/max latitude
    var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

    var worldCoords = [
    new google.maps.LatLng(-maxLat, -180),
    new google.maps.LatLng(maxLat, -180),
    new google.maps.LatLng(maxLat, 180),
    new google.maps.LatLng(-maxLat, 180),
    new google.maps.LatLng(-maxLat, 0)];

    var EuropeCoords = [
    new google.maps.LatLng(29.7, -23.7),
    new google.maps.LatLng(29.7, 44.8),
    new google.maps.LatLng(71.8, 44.8),
    new google.maps.LatLng(71.8, -23.7)];

    // Construct the outer polygon
    var worldPoly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#000000',
        fillOpacity: 0.2,
        map: map
    });

    // Construct the inner polygon
    var europePoly = new google.maps.Polygon({
        path: EuropeCoords,
        strokeColor: 'red',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: 'yellow',
        fillOpacity: 0.5,
        map: map
    });
}

#map-canvas {

  height: 200px;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async differ src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>
<div id="map-canvas"></div>

注意：Android SDK甚至使它变得更容易。 documentation提到：

多边形可以是凸形或凹形，可以跨越180个子午线，并且可以具有未填充的孔。

孔：孔是多边形内未被填充的区域。孔的指定方式与轮廓完全相同。孔必须完全包含在轮廓内。可以指定多个孔，但是不支持重叠的孔。

Answer 2

@MrUpsideDown的答案可以100％起作用，但是我决定添加一个Android实现方式来解决这个问题，因为问题的背景是Android。

总体思路是用多边形覆盖整个地图。该多边形将具有fillColor（可以是暗色）。要突出显示您要关注的位置，只需在多边形上添加孔即可。

我们可以将其分为三个简单步骤：

获取您要关注的所有地点的坐标。您要关注的每个地方都应该是LatLng列表。这是一个示例：

    public List<List<LatLng>> allMyHoles(){

        // list to hold all holes
        List<List<LatLng>> holes = new ArrayList<>();

        // location one
        List<LatLng> hole1 = new ArrayList<>();
        hole1.add(new LatLng(51.509959, -0.181208));
        hole1.add(new LatLng(51.511288, -0.158354));
        hole1.add(new LatLng(51.506520, -0.152773));
        hole1.add(new LatLng(51.512158, -0.174572));
        hole1.add(new LatLng(51.522434, -0.197979));

        holes.add(hole1);

        // location 2
        List<LatLng> hole2 = new ArrayList<>();
        hole2.add(new LatLng(51.500216, -0.166685));
        hole2.add(new LatLng(51.544934, -0.152737));
        hole2.add(new LatLng(51.547666, -0.152949));
        hole2.add(new LatLng(51.544964, -0.156916));
        hole2.add(new LatLng(51.535335, -0.14565));
        hole2.add(new LatLng(51.533599, -0.156538));

        holes.add(hole2);

        return holes;

    }

在此阶段，您要创建的所有孔都在称为孔的列表中。

2.用多边形覆盖整个地球，然后给它加上暗淡的颜色：要实现此目的，我们需要获取地球的边界。不用担心实现，这是一种返回整个地球的LatLng的方法：

    private List<LatLng> getEarthlyBound() {
        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));
        }};
    }

3.最后一步是创建我们的PolygonOptions对象，并将其添加到地图中。由于我们已经可以访问地球的LatLng尺寸以及要在其中创建的孔，因此可以继续创建PolyOptions对象，请遵循以下功能：

private PolygonOptions createPolygonWithHoles(List<List<LatLng>> holes) {

    PolygonOptions polyOptions = new PolygonOptions()
            .fillColor(0x33000000) /*sample fill color*/
            .addAll(getEarthlyBound()) /*the bounds of the earth*/
            .strokeColor(0xFF000000) /*sample stroke color*/
            .strokeWidth(5); /*sample stroke width*/

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

    return polyOptions;
}

此后，我们现在可以像这样将PolyOptions对象添加到地图中：

mMap.addPolygon(createPolygonWithHoles(allMyHoles()));

我希望这对某人有帮助。快活的编码！

我如何专注于GoogleMap的特定部分

2 个答案: