VPF::Как нарисовать Polyline между маркерами?

Aliance

Дата 12.1.2009, 12:14 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 1
Всего: 137

Доброго всем времени суток!

Есть данные в базе, хранящие адреса покупателей. С помощью Google API я ставлю на каждом из них маркер.
Необходимо же добавить следующий функционал:
по клику на маркере рисуется линяя от него к следующему клику.

В интернете нашел практически подходящий мне пример и попытался его модифицировать, но ничего не вышло.

Мне нужно строго так: чтобы линии можно было рисовать вручную только между маркерами, а у меня выходит только между любыми точками карты. При чем при клике на маркер линяя не рисуется :(

Вот неудачный код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;oe=utf-8&amp;hl=ru&amp;v=2&amp;key=ABQIAAAAfn2AgLKUfQ2J-O2GaIPi7xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRxOpeLMJURBCs1-VQopNs4Mr1naQ"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var map = null;
    var geocoder = null;
    var points = [];

    // беруться из MySQL
    var addresses = [ 'Россия, город Санкт-Петербург, 7-я Советская ул., 19', 'Россия, город Санкт-Петербург, ул. Хо Ши Мина, 11 корпус 2', 'Россия, город Санкт-Петербург, Пражская ул., 3',  ];

    function load()
    {
        if ( GBrowserIsCompatible() )
        {
            map = new GMap2( document.getElementById( 'map' ), { size: new GSize( 1200, 700 ) } );
            map.setCenter( new GLatLng( 59.936354, 30.37 ), 11 );
            map.addControl( new GLargeMapControl );
            map.enableDoubleClickZoom();  
            map.enableScrollWheelZoom();  
            geocoder = new GClientGeocoder();
            map.clearOverlays();
            if ( geocoder )
            {
                for ( var i = 0; i < addresses.length; i++ )
                {
                    geocoder.getLocations(
                        addresses[i],
                        function( response )
                        {
                            if ( response && response.Status.code == 200 )
                            {
                                place = response.Placemark[0];
                                point = new GLatLng(place.Point.coordinates[1],
                                                    place.Point.coordinates[0]);
                                var marker = new GMarker( point );
                                /*
                                GEvent.addListener( marker, 'click', function()
                                    {
                                        points.push( '(' + this.ka.lat() + ', ' + this.ka.lng() + ')' );
                                        document.getElementById( 'dbg' ).innerHTML = points.length + '<br />';
                                        for ( var i = 0; i < points.length; i++ ) document.getElementById('dbg').innerHTML += points[i] + '<br />';
                                        document.getElementById( 'dbg' ).innerHTML += points.toString() + '<br />';
                                        map.addOverlay( new GPolyline( points, "#ff0000", 2, 1 ) );
                                    }
                                );
                                */
                                map.addOverlay( marker );
                            }
                        }
                    );                
                }
            }
            GEvent.addListener( map, 'click', function( marker, point )
                {
                    //if ( marker == null || typeof marker != 'object' ) return;
                    //if ( marker ) points.push( '(' + marker.ka.lat().toFixed(13) + ', ' + marker.ka.lng().toFixed(13) + ')' );
                    if ( point ) points.push( point );
                    else return;
                    document.getElementById( 'dbg' ).innerHTML = points.length + '<br />';
                    for ( var i = 0; i < points.length; i++ ) document.getElementById('dbg').innerHTML += points[i] + '<br />';
                    document.getElementById( 'dbg' ).innerHTML += points.toString() + '<br />';
                    map.addOverlay( new GPolyline( points, "#ff0000", 2, 1 ) );
                }
            );
        }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1200px; height: 700px"></div>
    <br />
    <div id="dbg"></div>
  </body>
</html>

Закомментированные куски:
• Первый - это попытка бинда события не на клике по карте, а на клике по маркеры. Так же как и второй комментарий - все проходит правильно, но линии почему-то нет :(
• Второй - это попытка клика только на маркере. Как видно в отладочной информации, координаты беруться и беруться верно, но линяя не рисуется :(

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Aliance

Дата 12.1.2009, 13:01 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 1
Всего: 137

Хм, вопрос решил. Вот рабочий код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;oe=utf-8&amp;hl=ru&amp;v=2&amp;key=ABQIAAAAfn2AgLKUfQ2J-O2GaIPi7xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRxOpeLMJURBCs1-VQopNs4Mr1naQ"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var map = null;
    var geocoder = null;
    var points = [];
    var polylines = [];
    var addresses = [ 'Россия, город Санкт-Петербург, 7-я Советская ул., 19', 'Россия, город Санкт-Петербург, ул. Хо Ши Мина, 11 корпус 2', 'Россия, город Санкт-Петербург, Пражская ул., 3',  ];

    function load()
    {
        if ( GBrowserIsCompatible() )
        {
            map = new GMap2( document.getElementById( 'map' ), { size: new GSize( 1200, 700 ) } );
            map.setCenter( new GLatLng( 59.936354, 30.37 ), 11 );
            map.addControl( new GLargeMapControl );
            map.enableDoubleClickZoom();  
            map.enableScrollWheelZoom();  
            geocoder = new GClientGeocoder();
            map.clearOverlays();
            if ( geocoder )
            {
                for ( var i = 0; i < addresses.length; i++ )
                {
                    geocoder.getLocations(
                        addresses[i],
                        function( response )
                        {
                            if ( response && response.Status.code == 200 )
                            {
                                place = response.Placemark[0];
                                point = new GLatLng(place.Point.coordinates[1],
                                                    place.Point.coordinates[0]);
                                var marker = new GMarker( point );
                                GEvent.addListener( marker, 'click', function()
                                    {
                                        points.push( new GLatLng( this.ka.lat(), this.ka.lng() ) );
                                        polylines[ i ] = new GPolyline( points, "#ff0000", 2, 1 );
                                        map.addOverlay( polylines[ i ] );
                                    }
                                );
                                map.addOverlay( marker );
                            }
                        }
                    );                
                }
            }
        }
    }
    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1200px; height: 700px"></div>
  </body>
</html>

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

bigkaban

Дата 7.7.2009, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 24.3.2008

Репутация: нет
Всего: нет

Привет, меня очень заинтересовала твоя реализация, можно посмотреть на твой сайт? Хочется увидеть как это работает)) я так понимаю ломаные автоматом дорисовываются по маркерам? в коде есть единственная ссылка на скрипт карты, этого достаточно для работы твоего скрипта?
заранее спасибо))

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Другие движки / фрейморки \| Следующая тема »