将多边形/圆形形状混合到谷歌地图的其余部分

Question

现在我有一个由maps.Polygon创建的圆圈。我可以设置strokeWeight：0并删除多边形周围的线，我可以将它混合在一起，这样圆与地图其余部分之间的分界点就不是一条独特的线。防爆。如下图所示。

这是我的多边形代码。

var $googlemap; //this code is above polygon code
var bounds = new google.maps.LatLngBounds();

var outerbounds = [ // covers the (mercator projection) world
    new google.maps.LatLng(85, 180),
    new google.maps.LatLng(85, 90),
    new google.maps.LatLng(85, 0),
    new google.maps.LatLng(85, -90),
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(0, -180),
    new google.maps.LatLng(-85, -180),
    new google.maps.LatLng(-85, -90),
    new google.maps.LatLng(-85, 0),
    new google.maps.LatLng(-85, 90),
    new google.maps.LatLng(-85, 180),
    new google.maps.LatLng(0, 180),
    new google.maps.LatLng(85, 180)];

// options for the polygon
var populationOptions = {
    //strokeColor: '#FF0000',
    //strokeOpacity: 0.8,
    strokeWeight: 0,
    //fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: $googlemap,
    paths: [outerbounds, drawCircle(new google.maps.LatLng(mapCoordinates.latitude, mapCoordinates.longitude), .1, -1)]
};
// Add the circle for this city to the map.
var cityCircle = new google.maps.Polygon(populationOptions);
$googlemap.fitBounds(bounds);


function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;

// find the raidus in lat/lon 
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);

var extp = new Array();
if (dir == 1) { var start = 0; var end = points + 1 } // one extra here makes sure we connect the ends
else { var start = points + 1; var end = 0 }
for (var i = start; (dir == 1 ? i < end : i > end) ; i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
}
return extp;
}

以下是我的地图目前的样子。

这就是我想要它的样子。 我想让圆圈与地图的其他部分融合。

Answer 1

没有预先存在的库（甚至第三方）或API可以帮助您完成此任务。您可以尝试使用Google Maps Styles。您有两种选择：

• 您需要编辑伽玛和亮度样式。这不是透明效果，这意味着它不允许看到地图后面的任何元素，但它应该实现与您想要实现的示例类似的淡出效果。
• 亮度默认参数为0，因此如果这是您的目标，您将希望将其减少为负数。降低饱和度可能会产生更多你想要的效果。

你可以在你的制造商附近试试这个，也可以工作。

希望有助于!!

Answer 2

理论上，如果你没有处理大量的标记，你可以放置大量具有相同中心和不同半径的低不透明度圆。