谷歌地图API v3 - 如何绘制动态多边形/折线？

Question

我有4天的Google Maps Javascript API经验,我发现他们的文档和信息共享最让人困惑.

有没有人有关于如何在谷歌地图上绘制多边形/折线的经验或知识(使用Javascript API V3),与此示例类似？(我发现这个博客帖子从2008)

到目前为止,我的研究可以告诉我该示例直接使用Javascript API V2或使用V2中的GeometryControl实用程序库(可在此处找到以供参考).我似乎无法找到Javascript API V3是否有任何方式允许这样的界面.

我将继续我的研究,但会感谢任何有用的评论或链接或建议.即使你指出我正在进行进一步研究的方向.:)

Answer 1

经过大量研究,我发现了这个例子.在发现它并谷歌搜索之后,似乎是像我这样的问题的一般答案.根据V3 API,这是非常基本但正确的.

使用此示例中的代码,我成功构建了我需要的原型.代码是基本的,但我发现它可以扩展到更好地符合我的规格,这是好的.

我对plexer的答案的评论中提供的链接将是最好的解决方案,但开发它的人表示它仍处于开发阶段,因此不足以在发布应用程序中使用.

Answer 2

对于Google Maps v3.7,您可以使用图库

另一个好的库:polygonEdit/polylineEdit由ryshkin@gmail.com提供

Answer 3

看一下曲线的脚本:http: //curved_lines.overfx.net/

以下是我使用的功能:

function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) {

  var LastLat = LatStart;
  var LastLng = LngStart;

  var PartLat;
  var PartLng;

  var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9);
  var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2);

  var OffsetMultiplier = 0;

  if (Horizontal == 1) {
    var OffsetLenght = (LngEnd - LngStart) * 0.1;
  } else {
    var OffsetLenght = (LatEnd - LatStart) * 0.1;
  }

  for (var i = 0; i < Points.length; i++) {
    if (i == 4) {
      OffsetMultiplier = 1.5 * Multiplier;
    }

    if (i >= 5) {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    } else {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    }

    if (Horizontal == 1) {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier;
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i]));
    } else {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i]));
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier;
    }

    curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color);

    LastLat = PartLat;
    LastLng = PartLng;
  }

  curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color);

}

function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) {
  var LineCordinates = new Array();

  LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart);
  LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd);

  var Line = new google.maps.Polyline({
    path: LineCordinates,
    geodesic: false,
    strokeColor: Color,
    strokeOpacity: 1,
    strokeWeight: 3
  }); 

  Line.setMap(map);
}

这是你的html内容+初始化脚本:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

  var map;
  google.maps.event.addDomListener(window, 'load', initialize);

  function initialize() {

    /* Create Google Map */ 

    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(41, 19.6),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    /* Add Sample Lines */

    /* Sofia - Burgas */
    curved_line_generate(42.68243562027229, 23.280029421875042, 42.488302202180364, 27.432861453125042,"#F00", true, 1);

    /* Sofia - Varna */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.19716750254011, 27.894287234375042,"#1a8809", true, 1);

    /* Ancona - Sofia */
    curved_line_generate(43.61221698671215, 13.458252078125042,42.68243562027229, 23.280029421875042, "#00F", true, 1);

    /* Sofia - Florence */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.73935229722859, 11.217041140625042,"#666", true, 1);

    /* Sofia - Athens */
    curved_line_generate(42.68243562027229, 23.280029421875042, 37.97884527841534, 23.719482546875042,"#ffa200", false, 2);
  }

</script>