我如何专注于 GoogleMap 的某个部分

Question

我正在处理 GoogleMap 活动。 在我的onMapReady(...) ，我想专注于地图的特定部分。 我能够通过使用多边形在地图上表示这一部分，如下所示：

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 甚至使它更容易。 文档中提到：

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

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

Answer 2

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

总体思路是用一个多边形覆盖整个地图。 这个多边形将有一个 fillColor（可能是暗色）。 要突出显示您想要关注的地方，您只需向多边形添加孔即可。

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

1. 获取您想要关注的所有地点的坐标。 您想要关注的每个地方都应该是一个 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()));

我希望这可以帮助别人。 快乐编码！