在多边形绘制多个洞 - 谷歌地图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屋！