如何专注于 GoogleMap 的某个部分答案

【问题标题】：How can I focus on a certain portion of GoogleMap如何专注于 GoogleMap 的某个部分
【发布时间】：2019-07-10 16:42:27
【问题描述】：

我正在处理一项 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));

上面的代码 sn-p 运行良好，完全符合我的预期。但是，我想加长一点。我想淡出地图的所有其他部分（可能有一个沉闷的覆盖）并只关注那个多边形。通过“只关注那个多边形”，这张来自“Via”应用程序的屏幕截图最能代表我的意思。

我想在地图上的任何地方创建一个暗淡的蒙版，除了多边形内的区域。我在文档中搜索了可以用来实现此目的的方法，但它是徒劳的。任何帮助将不胜感激。

【问题讨论】：

我在您发布的屏幕截图中没有看到任何“模糊”。也许是一个“不透明层”，您可以通过在现有区域多边形周围显示另一个多边形来轻松实现，黑色背景颜色和不透明度为 0.2 或类似的东西......
谢谢@MrUpsidown。我的意思是某种覆盖。 “模糊”是错误的词，我现在将编辑问题。
答案还是合适的。创建另一个覆盖视口其余部分（如果地图无法平移/缩放）或覆盖世界其他部分的多边形，您将拥有您所追求的。
看看this的答案。

标签： java android google-maps

【解决方案1】：

这是一个示例（使用 Javascript API）。这个想法在 Android 中是完全一样的。

在墨卡托投影中，最大北纬不是 90，而是 85.05113 左右。在 JavaScript 中你可以这样做：

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

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

然后您需要创建至少 1 个多边形（其中有一个孔）才能达到预期的效果。如果您需要对该区域进行着色，则需要第二个多边形（参见第二个 sn-p）。

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 条子午线，并且可以有未填充的孔。

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

【讨论】：

【解决方案2】：

@MrUpsideDown 的回答 100% 有效，但我决定添加一个 Android 实现来说明我如何能够解决这个问题，因为问题的上下文是 Android。

总体思路是用多边形覆盖整个地图。这个多边形会有一个填充颜色（可以是暗色）。要突出显示您想要关注的地方，您只需在多边形上添加孔即可。

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

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

    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()));

我希望这对某人有所帮助。编码愉快！

【讨论】：