防止重叠颜色在Google地图中变暗

Question

我不熟悉颜色术语，但是如何防止Google地图使重叠区域变暗？

的jsfiddle是产生界here

代码是：

var cityCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.5, 
      strokeWeight: 0, 
      fillColor: '#FF0000', 
      fillOpacity: 0.5, 
      map: map, 
      center: citymap[city].center, 
      radius: Math.sqrt(citymap[city].population) * 100 
      }); 

Answer 1

如Voltsan's answer所示，您可以创建具有多个圆形路径的单个多边形。如果它们重叠他们不会增加不透明度（如果它们缠绕在相同的方向，如果它们以相反的方向缠绕，交叉点不会被填充）

var paths = []; 
// create paths array for polygon 
for (var city in citymap) { 
    paths.push(drawCircle(citymap[city].center, Math.sqrt(citymap[city].population) * 100, direction)); 
} 
// Add the circles for the cities to the map. 
var cityCircle = new google.maps.Polygon({ 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.5, 
    strokeWeight: 0, 
    fillColor: '#FF0000', 
    fillOpacity: 0.5, 
    map: map, 
    paths: paths 
}); 

proof of concept fiddle

代码片段：

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<title>Circles</title> 
 
<div id="map"></div> 
 
<script> 
 
    function initMap() { 
 
    // Create the map. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 6, 
 
     center: { 
 
     lat: 40.714, 
 
     lng: -78.005 
 
     }, 
 
     mapTypeId: 'terrain' 
 
    }); 
 

 
    // Construct the circle for each value in citymap. 
 
    // Note: We scale the area of the circle based on the population. 
 
    var paths = []; 
 
    var direction = 1; 
 
    for (var city in citymap) { 
 
     paths.push(drawCircle(citymap[city].center, Math.sqrt(citymap[city].population) * 100, direction)); 
 
     /* if (direction == 1) direction = -1; 
 
     else direction = 1; */ 
 
    } 
 
    // Add the circle for this city to the map. 
 
    var cityCircle = new google.maps.Polygon({ 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.5, 
 
     strokeWeight: 0, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.5, 
 
     map: map, 
 
     paths: paths, 
 
     center: citymap[city].center, 
 
     radius: Math.sqrt(citymap[city].population) * 100 
 
    }); 
 
    } 
 

 
    function drawCircle(point, radius, dir) { 
 
    var d2r = Math.PI/180; // degrees to radians 
 
    var r2d = 180/Math.PI; // radians to degrees 
 
    var earthsradius = 6378137.0; // 6378137.0 is the radius of the earth in meters 
 
    var points = 32; 
 
    if (typeof point.lat != "function") { 
 
     if (typeof point.lat != "number") { 
 
     alert("drawCircle: point.lat not function or number"); 
 
     return; 
 
     } 
 
     point = new google.maps.LatLng(point.lat, point.lng); 
 
    } 
 

 
    // 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)); 
 
    } 
 
    return extp; 
 
    } 
 
    // This example creates circles on the map, representing populations in North 
 
    // America. 
 

 
    // First, create an object containing LatLng and population for each city. 
 
    var citymap = { 
 
    chicago: { 
 
     center: { 
 
     lat: 40.514, 
 
     lng: -74.205 
 
     }, 
 
     population: 2714856 
 
    }, 
 
    newyork: { 
 
     center: { 
 
     lat: 40.714, 
 
     lng: -78.005 
 
     }, 
 
     population: 8405837 
 
    }, 
 
    losangeles: { 
 
     center: { 
 
     lat: 34.052, 
 
     lng: -118.243 
 
     }, 
 
     population: 3857799 
 
    }, 
 
    }; 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>

Answer 2

您可以使用多边形类来获得重叠不透明度为单。

var ccities = 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 
}); 
ccities.setMap(map);