Нарисуйте многоугольник с GPolygon без GMap

Question

Кто-нибудь знает, как я могу рисовать многоугольники с GPolygon с карты Google, не имея карты, внутри других элементов? Или кто-нибудь знает какие-либо рамки, чтобы сделать это с теми же функциями, что и GPolygon?

Я хотел бы, чтобы это «draw polygon» на пользовательский элемент, как DIV:

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

Answer 1

ЗАКАНЧИВАТЬ Raphael, в библиотеку JavaScript, которая обтекает VML в IE и 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 по вкусу, если вам не нравится моя.

EDIT: исправлены некоторые небольшие ошибки.

Answer 2

Я согласен с slebetman в том, что Рафаэль совершенно здоров. Обратите внимание, однако, что ни SVG, ни VML в настоящее время не поддерживаются в браузере Android. Canvas с excanvas.js может стать лучшей ставкой для кросс-браузерной работы, если вы также настроите Android.

Кроме того, если вы действительно хотите использовать API карт Google, вы можете просто скрыть карту. Но вы все равно будете придерживаться логотипа 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