用没有 GMap 的 GPolygon 绘制多边形答案

【问题标题】：Draw Polygon with GPolygon without GMap用没有 GMap 的 GPolygon 绘制多边形
【发布时间】：2011-04-14 15:12:57
【问题描述】：

任何人都知道如何在没有地图的情况下从 Google Map 中使用 GPolygon 在其他元素内绘制多边形？或者有人知道任何框架可以使用与 GPolygon 等相同的功能来实现吗？

我想在自定义元素上添加这个“draw polygon”，例如 div：

<div id="MyArea"></div>

【问题讨论】：

标签： javascript polygon

【解决方案1】：

查看Raphael，这是一个javascript 库，它在符合标准的浏览器中封装了IE 中的VML 和SVG。它相当容易使用而且非常好documented。

当然，path 元素（用于绘制多边形和折线）使用了 SVG path string syntax，这有点神秘但很容易理解。您当然可以扩展 Raphael 以使用更简单的语法：

Raphael.fn.polygon = function () { // supply x,y coordinates as arguments
    var self = this.path();
    self.coords = [];
    for (var i=0;i<arguments.length;i++) self.coords.push(arguments[i]);

    self.update = function () {
        var pathlist = [];
        // the M command moves the cursor:
        pathlist.push('M'+self.coords[0]+' '+self.coords[1]);
        // the L command draws a line:
        pathlist.push('L');
        // Now push the remaining coordinates:
        for (var i=2;i<self.coords.length;i++) {
            pathlist.push(self.coords[i]);
        }
        // the Z command closes the path:
        pathlist.push('Z');
        self.attr('path',pathlist.join(' '));
    }
    self.update();
    return self;
}

应该允许你这样做：

<div id="MyArea"></div>
<script>
    var paper = Raphael("MyArea",640,480);
    var mypolygon = paper.polygon(
      10, 10,
      20, 20,
      10, 30
    );

    // you can even modify it after creation:
    mypolygon.coords.push(15,20);
    mypolygon.update();
</script>

如果您不喜欢我的，也可以创建自己的多边形 API 来品尝。

编辑：修复了一些小错误。

【讨论】：

:) 感谢您的帮助和代码。我从不使用 VML，但我会。
我刚刚注意到我的代码中有一个错误：在函数结束时没有返回 self。现在（希望）已修复。
要计算多边形的坐标（例如，在我的例子中是六边形），您可以在这里使用@Andrew Staroscik 的答案stackoverflow.com/questions/4839993/…

【解决方案2】：

我同意 slebetman 的观点，即 Raphael 非常棒。但请注意，Android 浏览器目前不支持 SVG 和 VML。如果您还针对 Android，则带有 excanvas.js 的 Canvas 可能是跨浏览器工作的更好选择。

另外，如果您真的想使用 Google Map API，您可以简单地隐藏地图。但是由于使用条款，您仍然会被 Google 徽标卡住。

您可以通过在 v2 中使用具有单一颜色的图块来做到这一点，但我相信在 v3 中还有其他方法可以做到这一点。

v2 方法示例：http://fisherwebdev.com/california

在 v3 中隐藏某些地图功能的示例：http://fisherwebdev.com/mapcolors -- 您可以使用相同的技术来隐藏所有功能。

试一试，看看在 v3 中可以隐藏/显示或重新设置哪些样式：http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

【讨论】：

:) 如果我不使用 VML 完成它，我可能会尝试这种方式。