Prevent overlapping colours becoming darker in Goo

问题:

I'm not familiar with colour terminology, but how can I prevent Google Maps from making the overlapping area darker?

JSFiddle is here

Code that generates the circles is:

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

回答1:

As indicated in Voltsan's answer, you can create a single polygon with multiple circular paths. If they overlap they won't increase the opacity (if they wind in the same direction, if they wind in opposite directions, the intersection will not be filled)

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

code snippet:

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>

回答2:

You can use Polygon class to get the overlap opacity to be single.

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