Google map wielokrotna nakładka bez zbiorczego nieprzezroczystości

Question

Mam mapę z wieloma okręgami przecinającymi się wzajemnie (poniżej jest tylko przykład z dwoma, ale jest to co najmniej około 100 okręgów). Kiedy się krzyżują, krycie jest podwojone, więc gdy mam skrzyżowanie 5 lub 6 kręgów, staje się po prostu kryciem 100%.

Czy istnieje sposób na umożliwienie, aby 2. okrąg nie pokazywał "nad" pierwszego? Właściwie to nie sądzę, ale może ktoś już spodziewał się czegoś takiego ...

LEWE: Co mam ----------------------- ----------------------- rację: co chcę

Tylko w przypadku, gdy chcę grać: 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); 

Dziękujemy za pomoc;)

Answer 1

z jednym Polygon wyciągnięcia z wieloma ścieżkami ---------- Z wielokrotność okręgi rysowane

@david odpowiedź Strachan rozwiązać dużą część mojego pytania . Oto część tego rozwiązania: najpierw należy użyć tej funkcji „drawCircle” zamiast obiektu kręgu 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; 
} 

Funkcja ta zwraca ścieżek, więc można go używać do buid tablicę ścieżek wich można używać po zbudować pojedynczy obiekt Polygon:

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

I to jest wszystko, musisz wyciągnąć złożoną, ale jeden wielokąt, prawdopodobnie łatwiejsze w użyciu.

Jedynym problemem dla mnie jest to, że sprawdzanie znaczników zawartych w tym pojedynczym wielokącie (z funkcją google function zawieraLocation i github.com/tparkin/Google-Maps-Point-in-Polygon) nie działa dobrze, więc musiałem nadal używać moje kręgi wielokrotności sprawdzają, czy znaczniki znajdują się w mojej strefie.

Dziękuję @ Dawid strachan za odpowiedź.

Answer 2

Za pomocą Polygon class można uzyskać krycie nakładania na s ingle.

var peanut = new google.maps.Polygon({ 
       paths: [drawCircle(citymap['chicago'].center, citymap['chicago'].population/3000, 1),//division by 3000 to suit 
         drawCircle(citymap['losangeles'].center,citymap['losangeles'].population/3000, 1)], 
       strokeColor: "#ff0000", 
       strokeOpacity: 0.35, 
       strokeWeight: 0, 
       fillColor: "#FF0000", 
       fillOpacity: 0.35 
    }); 
    peanut.setMap(map); 

Answer 3

Mam podobny problem, ale moje nakładki są rdzeniami o kształcie irygacyjnym. W Ellips w poniższym przykładzie są tylko do wykazania problem ale rzeczywiste rastry są kształty jakiejkolwiek formie ale posiadające wszystkie tego samego koloru:

<!DOCTYPE html><html><head> 
<title>Multi-Raster</title> 
<style type="text/css">html { height: 100% }body { height: 100%}</style> 
<script language="javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript"> 
var map; 
function initialize() { 
var coord = new google.maps.LatLng(45.4931831359863,-73.6133499145508); 
var myOptions = {zoom: 10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP}; 
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng(44.59386,-74.89627), new google.maps.LatLng(46.39251,-72.33043)); 
rmap1 =new google.maps.GroundOverlay("scrap.png", boundaries1); 
rmap1.setMap(map); 
rmap2 =new google.maps.GroundOverlay("scrap2.png", boundaries1); 
rmap2.setMap(map); 
} 
function showcov(m,v){if(v.checked) {m.setOpacity(0);m.setMap(map); }else {m.setMap(null);m.setOpacity(100);}} 
</script></head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%;height:100%"></div> 
</form></td></tr></table></div></body></html> 

raster1 raster2