javascript - 防止重叠的颜色在 Google map 中变暗

Question

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

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>