javascript - 使用 GPolygon 绘制多边形而不使用 GMap

Question

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

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

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

Answer 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 来品尝。

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