Движущиеся объекты на веб карте

Тема в разделе "Другие языки", создана пользователем CrashX, 8 фев 2011.

Модераторы: Цукер
  1. CrashX

    CrashX В прошлом XSiteCMS

    Регистр.:
    6 июн 2008
    Сообщения:
    682
    Симпатии:
    112
    неважно какая карта
    ЯК, Гугл, ОСМ
    мне больше интересно
    как

    допустим есть постоянно обновляемые данные формат не важне
    но там есть данные о единице, и скажем 10 ее точек


    нужно плавно между точка ее передвигать
    для начала хотябы вообще передвигать

    интересны советы, возможно примеры
     
  2. bugerok

    bugerok

    Регистр.:
    9 апр 2008
    Сообщения:
    300
    Симпатии:
    42
    Плавности точно не добиться, так как для смены точки необходима перезагрузка карты. {map_reload}
     
  3. CrashX

    CrashX В прошлом XSiteCMS

    Регистр.:
    6 июн 2008
    Сообщения:
    682
    Симпатии:
    112
    я бы так не говорил что не добится
    примеры

    плавно Перейти по ссылке
    не плавно Перейти по ссылке


    подгрузив буффер и двигать по векторному направлению ничего не мешает, это уже тонкости...
    меня больше инетесует как создать динамический слой как нем отображать и тп
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    на гугл картах есть спец функция для плавного передвижения к точке panTo, двигает карту с анимацией, но проблема только расчитать время за которое должно быть сделано передвижение, если расстояние большое а время маленькое, то очень быстро мелькает.
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    
    <title>Untitled Document</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
    
    <script type="text/javascript">
    var map;
    var point = 1;
    
    //точки для двигателя
    var markers = {
        point1:[55.755786, 37.617633],
        point2:[55.7543712, 37.6104643],
        point3:[55.7531491, 37.6101551],
        point4:[55.7506212, 37.6101143],
        point5:[55.7541852, 37.5274149],
        point6:[55.7473746, 37.609723],
        point7:[55.803607, 37.328598],
        point8:[55.7422534, 37.6064208],
        point9:[55.7397707, 37.6055861],
        point10:[55.704945, 37.5277036],
    };
    
    $(document).ready(function(){
           //карта
        var latlng = new google.maps.LatLng(55.755786, 37.617633);
        var myOptions = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        //отмечаем все точки на карте
        var marker = [];
        for(i in markers){
            marker[i] = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i][0], markers[i][1]), 
                map: map
            });
        }
        
        //map.panTo(new google.maps.LatLng(markers.point10[0], markers.point10[1]));
        
        //двигатель карты по точкам
        function mover(){
            map.panTo(new google.maps.LatLng(markers["point"+point][0], markers["point"+point][1]));
            point ++;
            if(point>10)point=1;
        }
        
        //карта не используется
        google.maps.event.addListener(map, 'idle', function(){
            setTimeout(mover, 500);//время в милисекундах
        });
    
    });
    </script>
    
    </head>
    
    <body>
    
    <div id="map_canvas" style="width:100%; height:100%"></div>
    
    </body>
    </html>
    
    
    
     
    XSiteCMS нравится это.