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

发布于 2024-09-24 11:19:52 字数 339 浏览 3 评论 0原文

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

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

原文

Anyone know how I can draw Polygons with GPolygon from Google Map without having a map, inside other elements? Or anyone know any framework to do it with the same features like GPolygon?

I would like to have this "draw polygon" on a custom element, like div:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨后咖啡店 2024-10-01 11:19:52

查看 Raphael，这是一个 JavaScript 库，它封装了 IE 中的 VML 和符合标准的浏览器中的 SVG。它相当容易使用，并且记录得很好。

当然， path 元素（用于绘制多边形和折线）使用 SVG 路径字符串语法这有点神秘，但很容易理解。您当然可以扩展 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 来品尝（如果您不喜欢我的）。

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

Check out Raphael, a javascript library that wraps around VML in IE and SVG in standards compliant browsers. It's fairly easy to use and quite well documented.

Granted, the path element (used to draw polygon and polylines) uses the SVG path string syntax which is a bit cryptic but quite easy to understand. You can of course extend Raphael to use a more simple syntax:

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;
}

Which should allow you to do:

<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>

Or create your own polygon API to taste if you don't like mine.

EDIT: fixed some small bugs.

回复收藏 0 原文