, показывающий анимацию полилиний в googlemap на основе выбора пользователя в раскрывающемся списке

Я создал приложение для анимации полилинии на Google-картах, анимация начнется, как только мы выберем конкретного пользователя из раскрывающегося списка , Приложение работает нормально, но проблема в том, что, как только определенная анимация будет запущена и будет продолжена, если мы выберем другого пользователя, приложение будет повеситься и показать неожиданные анимации,, показывающий анимацию полилиний в googlemap на основе выбора пользователя в раскрывающемся списке

может кто-нибудь скажет мне какое-то решение для взлома анимация между одним и тем же другим пользователем, и после этого необходимо показать выбранную полиномиальную анимацию пользователя

Plunker

<html lang="en"> 

    <head> 
    <script data-require="[email protected]" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.2.16/angular.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script> 
    </head> 

    <body ng-app="app" ng-controller="Controller"> 

    <select ng-change="showGPSTracking()" ng-model="user"> 
    <option selected="selected" value="" class="">Select User</option> 
    <option value="1458">1458</option> 
    <option value="1658">1658</option> 
    </select> 
    </br></br></br></br> 
    <div style="width: 880px;"> 
     <div id="map" style="width: 880px; height: 500px; float: left;"></div> 
    </div> 
    </body> 

</html>

источник

2015-01-16 Alex Man

Ваш Plunkr URL просто кажется, таймаут для меня прямо сейчас ... это может быть temporamental, но вы все равно бы лучше добавить ваш JavaScript на ваш вопрос – duncan

@duncan есть какие-либо проблемы с моей plunker , так как из-за длины я включил js в свой вопрос .... вы можете видеть там внутри моего плункера –

Проблема у вас была бы у вас была единой глобальной map переменной. Каждый раз, когда вы меняете пользователя, вы обновляете эту карту и создаете сотни вызовов функций. Таким образом, эти вызовы функций на первой карте начинают противоречить тем, что находятся на второй карте - все они работают на одном и том же объекте карты.

Мое быстрое и грязное исправление здесь заключается в том, чтобы сделать объект карты локальной переменной и передать его в функцию autoRefresh. Вызов функций на первой карте все равно будет происходить, просто результат не будет виден, поскольку вы по существу скрыли эту карту, когда вы повторно назначили отображение карты на новую карту.

Это не идеал, я думаю, но он работает для меня. В идеале у вас будет какой-то способ «остановить» анимацию на одной из карт и предотвратить выполнение всех функций, добавляющих к маршруту.

var app = angular.module('app', []); 

app.controller("Controller", function($scope, $http, item) { 
    $scope.tracker = {}; 
    var items; 
    $scope.showLiveMap = false; 
    $scope.showLiveMap = false; 
    var firtslat, firstlong; 

    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png"); 
    var center = null; 
    //var map = null; - you don't need this any more 
    var currentPopup; 
    var bounds = new google.maps.LatLngBounds(); 
    var markLAT, markLNG, trackId; 
    var marker; 

    function moveMarker(map, marker, lat, lon) { 
    try { 
     marker.setPosition(new google.maps.LatLng(lat, lon)); 
     map.panTo(new google.maps.LatLng(lat, lon)); 

    } catch (e) {} 
    } 

    $scope.autoRefresh = function(map) { 
    try { 
     var route = new google.maps.Polyline({ 
       path: [], 
       geodesic : true, 
       strokeColor: '#FF0000', 
       strokeOpacity: 1.0, 
       strokeWeight: 2, 
       editable: false, 
       map:map 
      }), 
      index=0, 
      marker=new google.maps.Marker({map:map,icon:icon}); 

     if (!_.isEmpty(items)) { 
     angular.forEach(items, function(cordinates) { 
      setTimeout(function() 
      {   
      route.getPath().push(new google.maps.LatLng(cordinates.lat, cordinates.lng)); 

      // route.setMap(map); not necessary, you set the map when you created the route 
      moveMarker(map, marker, cordinates.lat, cordinates.lng); 
      markLAT = cordinates.lat; 
      markLNG = cordinates.lng; 
      }, 200*++index); 
     }); 
     } 
     // 
    } catch (e) { 
     console.log(e); 
    } 
    }; 

function initMap(user) 
{ 
    items = item.items[user]; 
    try { 
    markLAT = items[items.length - 1].lat; 
    markLNG = items[items.length - 1].lng; 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(markLAT, markLNG), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     navigationControl: true, 
     navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
     } 
    }); 
    $scope.autoRefresh(map); // passed the local map variable into the function 
    } catch (e) { 
    console.log(e); 
    } 
} 

    $scope.showGPSTracking = function() { 
    if (!_.isNull($scope.user)) { 
     initMap($scope.user); 
    } else { 
     console.log("entered"); 
     $scope.showLiveMap = false; 
    } 
    }; 
});

источник

2015-01-16 20:04:52 duncan

, показывающий анимацию полилиний в googlemap на основе выбора пользователя в раскрывающемся списке

ответ

Смежные вопросы