java - 我怎样才能专注于谷歌地图的某个部分

Question

我正在处理 GoogleMap Activity 。在我的 onMapReady(...) 中，我想专注于 map 的特定部分。我能够使用 polygon 在 map 上表示这一部分如下图:

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

上面的代码 fragment 运行完美，完全符合我的预期。但是，我想多说一点。我想淡出 map 的所有其他部分(可能带有暗淡的叠加层)并单独关注该多边形。 “只关注那个多边形”，这个来自“Via”应用程序的屏幕截图最能表达我的意思。

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

Answer 1

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

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

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

这样你就可以找到投影的真正南北边缘(用你的多边形覆盖整个世界)。

然后您需要创建至少 1 个多边形(上面有一个洞)才能达到预期的效果。如果您需要对区域进行着色，则需要第二个多边形(参见第二个 fragment )。

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提及:

A polygon can be convex or concave, it may span the 180 meridian and it can have holes that are not filled in.

Holes: A hole is a region inside the polygon that is not filled. A hole is specified in exactly the same way as the outline. A hole must be fully contained within the outline. Multiple holes can be specified, however overlapping holes are not supported.