如何将圈子分成谷歌地图中的部门？ [英] How to split circle in to the sectors in google maps?
本文介绍了如何将圈子分成谷歌地图中的部门？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有什么办法可以将Google地图中的圈子分成120度的区域吗？目前我画了一个带半径的简单圆圈，它看起来像这样：
map = new google.maps.Map（document.getElementById （'map_canvas'），{
mapTypeId：google.maps.MapTypeId.ROADMAP，
zoom：16，
center：new google.maps.LatLng（55.685025,21.118995）
}）;
var lat_lng = new google.maps.LatLng（55.685025，21.118995）;
marker = new google.maps.Marker（{
位置：lat_lng，
map：地图，
图标：'map_green.png'
} ）;
circle = new google.maps.Circle（{
map：map，
radius：200，
fillColor：'green'，
center： lat_lng
}）;
然后我想我需要在圆圈顶部绘制三个多边形，但不知道如何计算该位置...
它应该是这样的：
解决方案
另一种方法是使用google.maps.geometry请注意谷歌地图脚本src中的'libraries = geometry'参数：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8>
< title> Some Title< / title>
< / head>
< body>
< div id =map_canvasstyle =width：800px; height：600px; margin：0 auto;>< / div>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&library=geometry&sensor=false>< / script>
< script type =text / javascript>
函数initialize（）{
var gm = google.maps，
centerPt = new gm.LatLng（55.685025，21.118995），
map = new gm.Map （document.getElementById（'map_canvas'），{
mapTypeId：gm.MapTypeId.ROADMAP，
zoom：16，
center：centerPt
}），
marker = new gm.Marker（{
position：centerPt，
map：map，
//颜色可用（marker.png为红色）：
//黑色，棕色，绿色，灰色，橙色，紫色，白色和黄色
图标：'http://maps.google.com/mapfiles/marker_green.png'
}），
slices = [
// startAngle，endAngle，用
[300,60，'red']，
[60,180，'green']，
[180，300， 'blue']
]，
polys = []，
i = 0，
radiusMeters = 200; $;
为（; i
//将圆圈的中心点作为路径中的第一项插入
path.unshift（centerPt）;
//将我们的圆的中心点添加为路径中的最后一项以创建闭合路径。
//注意谷歌实际上并不要求我们关闭路径，
//但不伤害这样做
path.push（centerPt）;
var poly = new gm.Polygon（{
path：path，$ b $ map：map，
fillColor：slices [i] [2]，
fillOpacity：0.6
}）;
polys.push（poly）;
}
}
/ ***
*需要：google.maps.geometry库，通过'libraries = geometry'参数
* on url到google maps脚本
* @param center必须是google.maps.LatLng对象。
* @param radiusMeters必须是一个数字，以米为单位的半径。
* @param startAngle必须是一个从0到360的整数，起始弧的角度。
* @param endAngle必须是0到360之间的一个整数，结束弧的角度。
*对于一个完整的圆，使用startAngle 0和360
*的endAngle，这将创建一个封闭的路径。
* @param direction -optional-默认为顺时针，
*传递字符串'逆时针'以反转方向。
* @返回google.maps.LatLng对象数组。
*** /
函数getArcPath（center，radiusMeters，startAngle，endAngle，direction）{
var point，previous，
atEnd = false，
points = Array （），
a = startAngle;
while（true）{
point = google.maps.geometry.spherical.computeOffset（center，radiusMeters，a）;
points.push（point）;
if（a == endAngle）{
break;
}
a ++;
if（a> 360）{
a = 1;
if（direction =='counterclockwise'）{
points = points.reverse（）;
}
回报点;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / body>
< / html>
可在此处查看的示例： http://jsfiddle.net/rkC2S/
Is there any way to split circle in google maps in to the sectors by 120 degrees? Currently i draw a simple circle with radius, it looks like this:
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16,
center: new google.maps.LatLng(55.685025, 21.118995)
});
var lat_lng = new google.maps.LatLng(55.685025, 21.118995);
marker = new google.maps.Marker({
position: lat_lng,
map: map,
icon: 'map_green.png'
});
circle = new google.maps.Circle({
map: map,
radius: 200,
fillColor: 'green',
center: lat_lng
});
Then i think i need to draw three polygons on top of the circle, but dont know how to calculate the position...
It should be like this:
解决方案
Another way to do it, this one using the google.maps.geometry library, note the 'libraries=geometry' parameter in the google maps script src:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Some Title</title>
</head>
<body>
<div id="map_canvas" style="width:800px; height:600px; margin:0 auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var gm = google.maps,
centerPt = new gm.LatLng(55.685025, 21.118995),
map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.ROADMAP,
zoom: 16,
center: centerPt
}),
marker = new gm.Marker({
position: centerPt,
map: map,
//Colors available (marker.png is red):
//black, brown, green, grey, orange, purple, white & yellow
icon: 'http://maps.google.com/mapfiles/marker_green.png'
}),
slices = [
//startAngle, endAngle, color to fill polygon with
[300, 60, 'red'],
[60, 180, 'green'],
[180, 300, 'blue']
],
polys = [],
i = 0,
radiusMeters = 200;
for (; i < slices.length; i++) {
var path = getArcPath(centerPt, radiusMeters, slices[i][0], slices[i][1]);
//Insert the center point of our circle as first item in path
path.unshift(centerPt);
//Add the center point of our circle as last item in path to create closed path.
//Note google does not actually require us to close the path,
//but doesn't hurt to do so
path.push(centerPt);
var poly = new gm.Polygon({
path: path,
map: map,
fillColor:slices[i][2],
fillOpacity:0.6
});
polys.push(poly);
}
}
/***
* REQUIRES: google.maps.geometry library, via a 'libraries=geometry' parameter
* on url to google maps script
* @param center must be a google.maps.LatLng object.
* @param radiusMeters must be a number, radius in meters.
* @param startAngle must be an integer from 0 to 360, angle at which to begin arc.
* @param endAngle must be an integer from 0 to 360, angle at which to end arc.
* For a full circle, use startAngle of 0 and endAngle of 360
* which will create a closed path.
* @param direction -optional- defaults to clockwise,
* pass string 'counterclockwise' to reverse direction.
* @Returns array of google.maps.LatLng objects.
***/
function getArcPath(center, radiusMeters, startAngle, endAngle, direction){
var point, previous,
atEnd = false,
points = Array(),
a = startAngle;
while (true) {
point = google.maps.geometry.spherical.computeOffset(center, radiusMeters, a);
points.push(point);
if (a == endAngle){
break;
}
a++;
if (a > 360) {
a = 1;
}
}
if (direction == 'counterclockwise') {
points = points.reverse();
}
return points;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Example viewable here: http://jsfiddle.net/rkC2S/
这篇关于如何将圈子分成谷歌地图中的部门？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
