圆圈填充颜色 [英] Circles fill colour
本文介绍了圆圈填充颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道是否有机会在圆圈之间填充不同的颜色，因此在下面的代码中，我使用了城市代码，但也适用于我的目的。无论如何，我有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}，
距离：12874.8
}，
elevenmiles：{
中心：{lat：53.3555367，lng：-6.2748774}，
距离：17702.8
}
};
函数initAutocomplete（）{
//创建地图。
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：10，
center：{lat：53.3555367，lng：-6.2748774}，
mapTypeId：'roadmap'
}）;
//为距离图中的每个值构造圆。
//注意：我们根据距离缩放圆圈的面积。
（距离地图中的var city）{
//将此城市的圆圈添加到地图。
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
}）;
解决方案
code> google.maps.Circle 。但是你可以制作带有洞的圆形 google.maps.Polygons 。请参阅以下相关问题：
代码段：
function initAutocomplete（）{//创建地图。 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 ++）{//将此城市的圆圈添加到地图。 var路径;如果（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）;函数drawCircle（point，radius，dir）{if（typeof point.lat！==function）{point = new google.maps。 LatLng（point.lat，point.lng）; } var d2r = Math.PI / 180; //度数为弧度var r2d = 180 / Math.PI; //弧度度数var earthsradius = 6378137.0; // 6378137.0是以米为单位的地球半径var points = 32; //在lat / lon找到raidus 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; } //一个额外的在这里确保我们连接结束其他{var start = points + 1; var end = 0; （var / i =（i /（points / 2））; ey = point.lng（）+（rlng * Math.cos（theta））; //中心a +半径x * cos（theta）ex = point.lat（）+（rlat * Math.sin（theta））; //中心b +半径y * sin（theta）extp.push（新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： - （中心：{lat：53.3555367，lng：-6.2748774}，距离：12874.8，颜色：＃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％;宽度：100％; margin：0px; < script src =https：//
I wonder it is any chance to fill different color between circles, so in the code below I have used code for cities but work for my purpose as well. Anyway I have 4 circles from the same center point, 4,6,8,11 miles and they are marked by strokecolor. However I wonder can I have different fill between 4-6, 6-8, 8-11 miles??
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
});
解决方案
You can't make "holes" in a google.maps.Circle. But you can make circular google.maps.Polygons with holes in them. See this related question:
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
});
code snippet:
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>
这篇关于圆圈填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
