圆圈填充颜色

Question

我想知道是否有机会在圆圈之间填充不同的颜色，所以在下面的代码中，我使用了城市代码，但也为我的目的工作。无论如何，我从同一个中心点有4个圆，4,6,8,11英里，它们被标记为strokecolor。但是我想知道我可以在4-6，6-8，8-11英里之间有不同的填充吗？

var distancemap = {
        fourmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 6437.38
        },
        sixmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 9656.064
        },
        eightmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 12874.8
        },
        elevenmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 17702.8
        }
      };

      function initAutocomplete() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: 53.3555367, lng: -6.2748774},
          mapTypeId: 'roadmap'
        });

        // Construct the circle for each value in distancemap.
        // Note: We scale the area of the circle based on the distance.
        for (var city in distancemap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#000000',
            fillOpacity: 0.005,
            map: map,
            center: distancemap[city].center,
            radius: Math.abs(distancemap[city].distance) * 1
          });

Answer 1

你不能在google.maps.Circle上打“洞”。但是你可以做一个有孔的圆形google.maps.Polygons。请参阅此相关问题：Draw ring (not circle) in Google Maps API

// Add the circle for this city to the map.
var paths;
if (i==0) {
  // innermost circle, no "hole"
  paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
  // every other circle has a "hole" the size of the inner/next smallest circle
  paths = [
    drawCircle(distanceArray[i-1].center, Math.abs(distanceArray[i-1].distance) * 1, -1),
    drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
  ];
}
var cityCircle = new google.maps.Polygon({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: distanceArray[i].color,
  fillOpacity: 0.5,
  map: map,
  paths: paths
});

proof of concept fiddle

​

​

代码片段：

​

function initAutocomplete() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 53.3555367,
      lng: -6.2748774
    },
    mapTypeId: 'roadmap'
  });
  for (var i = 0; i < distanceArray.length; i++) {
    // Add the circle for this city to the map.
    var paths;
    if (i == 0) {
      paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
    } else {
      paths = [drawCircle(distanceArray[i - 1].center, Math.abs(distanceArray[i - 1].distance) * 1, -1),
        drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
      ];
    }
    var cityCircle = new google.maps.Polygon({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: distanceArray[i].color,
      fillOpacity: 0.5,
      map: map,
      paths: paths
    });
  }
}
google.maps.event.addDomListener(window, "load", initAutocomplete);

function drawCircle(point, radius, dir) {
  if (typeof point.lat !== "function") {
    point = new google.maps.LatLng(point.lat, point.lng);
  }
  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;

  // 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));
    // bounds.extend(extp[extp.length - 1]);
  }
  return extp;
}

var distancemap = {
  fourmiles: {
    center: {
      lat: 53.3555367,
      lng: -6.2748774
    },
    distance: 6437.38,
    color: "#FF0000"
  },
  sixmiles: {
    center: {
      lat: 53.3555367,
      lng: -6.2748774
    },
    distance: 9656.064,
    color: "#00FF00"
  },
  eightmiles: {
    center: {
      lat: 53.3555367,
      lng: -6.2748774
    },
    distance: 12874.8,
    color: "#0000FF"
  },
  elevenmiles: {
    center: {
      lat: 53.3555367,
      lng: -6.2748774
    },
    distance: 17702.8,
    color: "#FFFF00"
  }
};
var distanceArray = [
  distancemap.fourmiles,
  distancemap.sixmiles,
  distancemap.eightmiles,
  distancemap.elevenmiles
]

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>

​