任何人都知道如何在没有地图的情况下从Google地图中绘制带有GPolygon的多边形,在其他元素中?或者任何人都知道使用GPolygon等相同功能的任何框架吗?
我想在自定义元素上使用“draw polygon”,例如div:
<div id="MyArea"></div>
答案 0 :(得分:5)
查看Raphael,这是一个javascript库,它在IE和SVG中包含符合标准的浏览器中的VML。它相当容易使用且非常好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。
编辑:修复了一些小错误。
答案 1 :(得分:1)
我同意slebetman的说法,拉斐尔非常棒。但请注意,Android浏览器当前不支持SVG和VML。如果您还定位Android,那么使用excanvas.js的画布可能是跨浏览器工作的更好选择。
此外,如果您真的想使用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