Рисуем полигон с GPolygon без GMap - PullRequest
Новая
       5

Рисуем полигон с GPolygon без GMap

2 голосов
/ 20 сентября 2010

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

Мне бы хотелось, чтобы этот " рисовать многоугольник " на пользовательском элементе, например, div: 

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

Ответы [ 2 ]

5 голосов
/ 20 сентября 2010

Ознакомьтесь с Raphael , библиотекой javascript, которая охватывает VML в IE и SVG в браузерах, соответствующих стандартам. Он довольно прост в использовании и довольно хорошо задокументирован .

Конечно, элемент path (используется для рисования многоугольника и полилиний) использует синтаксис строки пути SVG *1009*, который немного загадочный, но довольно простой для понимания. Конечно, вы можете расширить 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 голос
/ 20 сентября 2010

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

Кроме того, если вы действительно хотите использовать 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

...