Mappa Google sovrapposizione multipla nessuna opacità cumulativa

Question

Ho una mappa con più cerchi che si incrociano l'un l'altro (sotto c'è un esempio con solo due ma sono almeno 100 cerchi). Quando si incrociano, l'opacità è raddoppiata, quindi quando ho un incrocio tra 5 o 6 cerchi, diventa solo un'opacità del 100%.

C'è un modo per consentire al secondo cerchio di non mostrare "sopra" il primo? In realtà non lo penso ma forse qualcuno si aspettava qualcosa del genere ...

A SINISTRA: Quello che ho ----------------------- ----------------------- DESTRA: quello che voglio

Solo nel caso in cui si vuole giocare: 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); 

Grazie per il vostro aiuto;)

Answer 1

Con un poligono disegnare con più percorsi ---------- con multipli cerchi disegnati

@ David Strachan risposta risolto una grande parte della mia domanda . Ecco una parte di questa soluzione: in primo luogo è necessario utilizzare questa funzione "drawCircle" anziché l'oggetto Circolo di 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; 
} 

Questa funzione restituisce i percorsi, in modo da poter usare per buid una matrice di percorsi wich che si intende utilizzare dopo per costruire un unico oggetto poligono:

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

E questo è tutto, hai disegnato un complesso, ma singolo poligono, probabilmente più facile da usare.

L'unico problema per me è che gli indicatori di controllo contenute in questo singolo poligono (con funzione di google containsLocation e github.com/tparkin/Google-Maps-Point-in-Polygon) non funziona bene, così ho dovuto continuare a utilizzare i miei cerchi multipli per controllare se i marcatori sono nella mia zona.

Grazie a @david strachan per la sua risposta.

Answer 2

Utilizzando Polygon class è possibile ottenere l'opacità di sovrapposizione per essere 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

Ho un problema simile, ma i miei overlay sono antiruggine a forma di irrigazione. I ellips nel seguente esempio sono solo per dimostrare il problema, ma i raster reali sono forme di qualsiasi forma ma aventi tutti lo stesso colore:

<!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