在不使用GMap的情况下使用GPolygon绘制多边形

Question

有人知道我如何在没有地图的情况下，在其他元素中使用GPolygon从Google map绘制多边形吗？或者有谁知道有什么框架可以用像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，如果您不喜欢我的多边形API的话。

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

Answer 2

我同意斯莱贝曼的看法，拉斐尔非常棒。但是，请注意，Android浏览器目前不支持SVG和VML。如果你的目标也是安卓的话，使用excanvas.js的Canvas可能是跨浏览器工作的更好选择。

此外，如果您真的想使用Google map API，您可以简单地隐藏地图。但由于使用条款的原因，你仍然需要使用谷歌的徽标。

你可以通过在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