谷歌地图多重叠加无累积不透明度 [英] Google map multiple overlay no cumulative opacity

问题描述

我有一张地图，其中有多个圆圈相互交叉(下面是一个只有两个圆圈的例子，但至少大约有 100 个圆圈).当它们交叉时，不透明度会增加一倍，所以当我在 5 或 6 个圆圈之间交叉时，它就会变成大约 100% 的不透明度.

I've got a map with multiple circles crossing each other (bellow is an example with only two but it's about 100 circles at least). When they cross, opacity is doubled, so when i have a cross between 5 or 6 circles it just become about 100% opacity.

有没有办法让第二个圆圈不显示超过"第一个圆圈?实际上不这么认为，但也许有人已经预料到了这样的事情......

Is there a way to allow make the 2nd circle not showing "over" the first one ? Actually a don't think so but maybe someone already expected something like this...

左:我有什么 ---------------------------------------------- 右:我想要的

LEFT : What i have ---------------------------------------------- RIGHT : what i want

以防万一你想玩:http://jsfiddle.net/ZWt6w/

var populationOptions = {
      strokeWeight: 0,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);

感谢您的帮助;)

推荐答案

With One Polygon draw with multiple paths ---------- 绘制多个圆

With One Polygon draw with multiple paths ---------- With multiples circles drawn

@david strachan 的回答解决了我的大部分问题.这是此解决方案的一部分:首先，您必须使用此drawCircle"函数而不是 Google Maps API V3 的 Circle 对象:

@david strachan answer solved a big part of my question. Here is a part of this solution : first you must use this "drawCircle" function instead of the Circle object of Google Maps API V3 :

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
    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));
    }
    return extp;
}

此函数返回路径，因此您可以使用它来构建路径数组，之后您将使用它来构建单个 Polygon 对象:

This function returns paths, so you can use it to buid an array of paths wich you will use after to build a single Polygon object :

var polys = [] ;
$(xml).find("trkpt").each(function() { // Parsing every points of my track
    var p = new google.maps.LatLng($(this).attr("lat"), $(this).attr("lon"));
    points.push(p);
    if ( ( i++ % 10 ) == 0 ) // Only display a circle every 10 points
    {
        polys.push(drawCircle(p,radius/1609.344,1)) ; // Radius value is in meters for me, so i divide to make it in miles
    }
});


peanutcircle = new google.maps.Polygon({
    paths: polys,
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: color,
    fillOpacity: 0.35,
});
peanutcircle.setMap(map);

这就是全部，您已经绘制了一个复杂但单一的多边形，可能更易于使用.

And this is all, you've drawn a complex, but single polygon, probably easier to use.

对我来说唯一的问题是检查包含在这个单个多边形中的标记(使用 google 函数 containsLocation 和 github.com/tparkin/Google-Maps-Point-in-Polygon)效果不佳，所以我不得不继续使用我的多个圆圈以检查标记是否在我的区域中.

Only problem for me is that checking markers contained in this single polygon (with google function containsLocation and github.com/tparkin/Google-Maps-Point-in-Polygon) is not working good, so i had to continue using my multiples circles to check if markers are in my zone.

感谢@david strachan 的回答.

Thank @david strachan for his answer.

这篇关于谷歌地图多重叠加无累积不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！