在Google Maps API中绘制环（而不是圈） [英] Draw ring (not circle) in Google Maps API
本文介绍了在Google Maps API中绘制环（而不是圈）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
一个简单的解决方案可能是从25公里圈减去一个5公里的圈。可能吗？
解决方案
创建一个drawCircle函数：
函数drawCircle（point，radius，dir）{
var d2r = Math.PI / 180; //度数为弧度
var r2d = 180 / Math.PI; //弧度到度
var earthsradius = 3963; // 3963是以英里为单位的地球半径
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} //另外一个确保我们连接
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））; //中心a +半径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]）;
}
// alert（extp.length）;
返回extp;
}
然后您可以像这样使用它：
var donut = new google.maps.Polygon（{
paths：[drawCircle（new google.maps.LatLng（-33.9,151.2），100 ，1），
drawCircle（new google.maps.LatLng（-33.9,151.2），50，-1）]，
strokeColor：＃0000FF，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：＃FF0000，
fillOpacity：0.35
}）;
donut.setMap（map）;
请注意，内部圆圈需要在外部圆圈的对面风。
代码段：
function drawCircle（point，radius，dir）{var d2r = Math.PI / 180; //度数为弧度var r2d = 180 / Math.PI; //弧度度var earthsradius = 3963; // 3963是以英里数表示的地球半径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} //这里另外一个确保我们连接else {var start = points + 1; （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））; //中心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]）; } // alert（extp.length）;返回extp;} var map = null; var bounds = null; function initialize（）{var myOptions = {zoom：10，center：new google.maps.LatLng（-33.9,151.2），mapTypeControl：true，mapTypeControlOptions：{style ：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，navigationControl：true，mapTypeId：google.maps.MapTypeId.ROADMAP} map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; bounds = new google.maps.LatLngBounds（）; var donut = new google.maps.Polygon（{paths：[drawCircle（new google.maps.LatLng（-33.9,151.2），100,1），drawCircle（new google.maps.LatLng（-33.9,151.2），50 ，-1）]，strokeColor：＃0000FF，strokeOpacity：0.8，strokeWeight：2，fillColor：#FF0000，fillOpacity：0.35}）; donut.setMap（地图）; map.fitBounds（bounds）;} google.maps.event.addDomListener（window，load，initialize）;
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I would like to draw a ring 20km thick with empty 5km circle inside. I dont how how to do it. I believe it is possible.
One simple solution could be to substract one 5km circle from 25km circle. Is it possible? Thank you for any tips.
解决方案
Create a drawCircle function:
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
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
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]);
}
// alert(extp.length);
return extp;
}
Then you can use it like this:
var donut = new google.maps.Polygon({
paths: [drawCircle(new google.maps.LatLng(-33.9,151.2), 100, 1),
drawCircle(new google.maps.LatLng(-33.9,151.2), 50, -1)],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
donut.setMap(map);
Note that the inner circle needs to "wind" opposite the outer circle.
Example (as posted by Dr Molle)
code snippet:
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
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
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]);
}
// alert(extp.length);
return extp;
}
var map = null;
var bounds = null;
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
bounds = new google.maps.LatLngBounds();
var donut = new google.maps.Polygon({
paths: [drawCircle(new google.maps.LatLng(-33.9, 151.2), 100, 1),
drawCircle(new google.maps.LatLng(-33.9, 151.2), 50, -1)
],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
donut.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
这篇关于在Google Maps API中绘制环（而不是圈）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
