在多边形绘制多个洞 - 谷歌地图API [英] Drawing multiple holes into a polygon - google maps api
问题描述
我使用与此示例相同的方法 http://www.geocodezip.com/v3_polygon_example_donut.html 在多边形中画出我最初的整体。我现在想在最初的整体之后在同一个多边形中绘制多个整体,所以我想我可以这样做:
var p = new google.maps.Polygon({
paths:[drawCircle(getPosition(),100,1),
drawCircle(getPosition(),.02,-1),
drawCircle new google.maps.LatLng((45.345573,-71.09909500000003),
10,-1))],
strokeColor:#040102,
map:map
}) ;
但这不起作用。数组中的前2个路径将被绘制(它看起来与圆环示例完全相同),但它不会渲染最后一个路径。任何想法为什么?
谢谢! 在你的代码中(一个额外的括号)
var p = new google.maps.Polygon({
paths :[drawCircle(getPosition(),100,1),
drawCircle(getPosition(),.02,-1),
drawCircle(new google.maps.LatLng(45.345573,-71.09909500000003),
10,-1)],
strokeColor:#040102,
map:map
});
程式码片段:
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 p = new google.maps.Polygon({paths:[drawCircle(getPosition(),100,1),drawCircle(new google.maps.LatLng(45.4009928,-71.8824288),10,-1),drawCircle(new google .maps.LatLng(45.345573,-71.099095),10,-1)],strokeColor:#040102,map:map}); map.fitBounds(bounds);} function getPosition(){return new google.maps.LatLng(45.345573,-71.099095); } google.maps.event.addDomListener(window,'load',initialize);函数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]); }返回extp;}
body,html,#map_canvas { margin:0px; padding:0px;宽度:100%; height:100%;}
< script src = http://maps.google.com/maps/api/js\"></script><div id =map_canvas>< / div>
I am using the same method as this example http://www.geocodezip.com/v3_polygon_example_donut.html to draw my initial whole in the polygon. I now want to draw multiple wholes in the same polygon after the initial whole so I thought I could just do this:
var p = new google.maps.Polygon({
paths: [drawCircle(getPosition(), 100, 1),
drawCircle(getPosition(), .02, -1),
drawCircle(new google.maps.LatLng((45.345573,-71.09909500000003),
10, -1))],
strokeColor: "#040102",
map: map
});
But that doesn't work. The first 2 paths in the array will be drawn (which will look exactly like the donut example) but it won't render the last path. Any ideas why?
Thanks!
You have a typo in your code (an extra set of parentheses)
var p = new google.maps.Polygon({
paths: [drawCircle(getPosition(), 100, 1),
drawCircle(getPosition(), .02, -1),
drawCircle(new google.maps.LatLng(45.345573,-71.09909500000003),
10, -1)],
strokeColor: "#040102",
map: map
});
code snippet:
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 p = new google.maps.Polygon({
paths: [
drawCircle(getPosition(), 100, 1),
drawCircle(new google.maps.LatLng(45.4009928, -71.8824288), 10, -1),
drawCircle(new google.maps.LatLng(45.345573, -71.099095), 10, -1)
],
strokeColor: "#040102",
map: map
});
map.fitBounds(bounds);
}
function getPosition() {
return new google.maps.LatLng(45.345573, -71.099095);
}
google.maps.event.addDomListener(window, 'load', initialize);
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]);
}
return extp;
}
body,
html,
#map_canvas {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas"></div>
这篇关于在多边形绘制多个洞 - 谷歌地图API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!