-1

在下面的代码中,我需要在地图中显示折线

我对下面提到的以下代码有疑问。在这里,我使用 googlemap 显示了两个出租车图标,它们以 3 秒的时间间隔在地图中移动。我想沿着出租车移动的路径画一条线..帮助。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Taxi Tracker App</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>


   <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">
    var myCarsLatVal =new Array(); 
           // for car 1..............................................

                myCarsLatVal[0]="28.611335";  
                myCarsLatVal[1]="28.611278";  
                myCarsLatVal[2]="28.611258";  
                myCarsLatVal[3]="28.611203";  
                myCarsLatVal[4]="28.611168";  
                myCarsLatVal[5]="28.611141";  
                myCarsLatVal[6]="28.611128";  
                myCarsLatVal[7]="28.611069";  
                myCarsLatVal[8]="28.611048";  
                myCarsLatVal[9]="28.611019";  
                myCarsLatVal[10]="28.610993";  
                myCarsLatVal[11]="28.610979";  
                myCarsLatVal[12]="28.610951";  
                myCarsLatVal[13]="28.610937";  
                myCarsLatVal[14]="28.610918";  
                myCarsLatVal[15]="28.610895";  
                myCarsLatVal[16]="28.610878";  
                myCarsLatVal[17]="28.610857";
                myCarsLatVal[18]="28.610829";  
                myCarsLatVal[19]="28.610791"; 
                myCarsLatVal[20]="28.610767"; 
                myCarsLatVal[21]="28.610746"; 
                myCarsLatVal[22]="28.610720"; 
                myCarsLatVal[23]="28.610685"; 
                myCarsLatVal[24]="28.610661"; 
                myCarsLatVal[25]="28.610638"; 
                myCarsLatVal[26]="28.610603"; 
                myCarsLatVal[27]="28.610570"; 
                //myCarsLatVal[40]="28.610603";


                var myCarsLangVal = new Array(); 

                myCarsLangVal[0] =  "77.234467";
                myCarsLangVal[1] =  "77.234508";
                myCarsLangVal[2] =  "77.234515";
                myCarsLangVal[3] =  "77.234551";
                myCarsLangVal[4] =  "77.234571";
                myCarsLangVal[5] =  "77.234589";
                myCarsLangVal[6] =  "77.234596";
                myCarsLangVal[7] =  "77.234634";
                myCarsLangVal[8] =  "77.234636";
                myCarsLangVal[9] =  "77.234658";
                myCarsLangVal[10] =  "77.234674";
                myCarsLangVal[11] =  "77.234698";
                myCarsLangVal[12] =  "77.234717";
                myCarsLangVal[13] =  "77.234736";
                myCarsLangVal[14] =  "77.234762";    
                myCarsLangVal[15] =  "77.234781";    
                myCarsLangVal[16] =  "77.234811";
                myCarsLangVal[17] =  "77.234843"; 
                myCarsLangVal[18] =  "77.234907"; 
                myCarsLangVal[19] =  "77.234974"; 
                myCarsLangVal[20] =  "77.235015"; 
                myCarsLangVal[21] =  "77.235060"; 
                myCarsLangVal[22] =  "77.235100"; 
                myCarsLangVal[23] =  "77.235157"; 
                myCarsLangVal[24] =  "77.235200"; 
                myCarsLangVal[25] =  "77.235251"; 
                myCarsLangVal[26] =  "77.235310"; 
                myCarsLangVal[27] =  "77.235361"; 
               // myCarsLangVal[40] =  "77.235310"; 


          // for car 2................................

            var myCarsLatValr =new Array(); 
                myCarsLatValr[0]="28.611194";  
                myCarsLatValr[1]="28.611137";  
                myCarsLatValr[2]="28.611097";  
                myCarsLatValr[3]="28.611041";  
                myCarsLatValr[4]="28.610977";  
                myCarsLatValr[5]="28.610946";  
                myCarsLatValr[6]="28.610918";  
                myCarsLatValr[7]="28.610895";  
                myCarsLatValr[8]="28.610859";
                myCarsLatValr[9]="28.610859";  
                myCarsLatValr[10]="28.610812";  
                myCarsLatValr[11]="28.610765";  
                myCarsLatValr[12]="28.610711";  
                myCarsLatValr[13]="28.610685";  
                myCarsLatValr[14]="28.610659";  
                myCarsLatValr[15]="28.610633";  
                myCarsLatValr[16]="28.610593";  
                myCarsLatValr[17]="28.610546";  
                myCarsLatValr[18]="28.610511";  
                myCarsLatValr[19]="28.610478";  
                myCarsLatValr[20]="28.610450";  
                myCarsLatValr[21]="28.610407";  
                myCarsLatValr[22]="28.610358"; 
                myCarsLatValr[23]="28.610311"; 
                myCarsLatValr[24]="28.610271"; 
                myCarsLatValr[25]="28.610221"; 
                myCarsLatValr[26]="28.610172"; 
                myCarsLatValr[27]="28.610132"; 


                var myCarsLangValr = new Array(); 

                myCarsLangValr[0] =  "77.234416";
                myCarsLangValr[1] =  "77.234392";
                myCarsLangValr[2] =  "77.234371";
                myCarsLangValr[3] =  "77.234347";
                myCarsLangValr[4] =  "77.234320";
                myCarsLangValr[5] =  "77.234298";
                myCarsLangValr[6] =  "77.234274";
                myCarsLangValr[7] =  "77.234253";
                myCarsLangValr[8] =  "77.234218"; 
                myCarsLangValr[9] =  "77.234218";  
                myCarsLangValr[10] =  "77.234172";
                myCarsLangValr[11] =  "77.234127";
                myCarsLangValr[12] =  "77.234084";
                myCarsLangValr[13] =  "77.234011";
                myCarsLangValr[14] =  "77.233931";   
                myCarsLangValr[15] =  "77.233842";   
                myCarsLangValr[16] =  "77.233738";
                myCarsLangValr[17] =  "77.233639";
                myCarsLangValr[18] =  "77.233572"; 
                myCarsLangValr[19] =  "77.233483"; 
                myCarsLangValr[20] =  "77.233405"; 
                myCarsLangValr[21] =  "77.233327"; 
                myCarsLangValr[22] =  "77.233199";  
                myCarsLangValr[23] =  "77.233086"; 
                myCarsLangValr[24] =  "77.232987"; 
                myCarsLangValr[25] =  "77.232885"; 
                myCarsLangValr[26] =  "77.232775"; 
                myCarsLangValr[27] =  "77.232681"; 



               var count=-1;  var count1=-1;
               var markersArray = []; var markersArray1 = [];

               for(gg in markersArray)  
               {
                  markersArray[gg].setMap(null);
               }
               markersArray.length = 0; 

               for(ggg in markersArray1)    
               {
                  markersArray1[ggg].setMap(null);
               }
               markersArray1.length = 0; 

      function initialize() 
      {
            var poly;
            var myLatlng = new google.maps.LatLng(myCarsLatVal[0],myCarsLangVal[0]);    
            var mapOptions = {
                    zoom: 20,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                }
             var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


             // .... set polyline properties...
              var polyOptions = {
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
              }

              poly = new google.maps.Polyline(polyOptions);
              poly.setMap(map);

                //setInterval(function(){count++; markersArray[count] = new google.maps.Marker({position: new google.maps.LatLng(myCarsLatVal[count],myCarsLangVal[count]),Icon :"<?php echo base_url();?>/images/taxi.png",map : map}); google.maps.event.addListener(markersArray[count], 'click', function() {infowindow.open(map,markersArray[count]);});},2000)
      // .......................
          setInterval(function(){DisplayTaxiMarker()}, 3000);
          function DisplayTaxiMarker()
          {
                  //................car1................
                  count++; 
                  markersArray[count] = 
                        new google.maps.Marker({position : new google.maps.LatLng(myCarsLatVal[count],myCarsLangVal[count]),
                                                Icon     :"<?php echo base_url();?>/images/taxi.png",                                       
                                                map      : map}); 


                /*                              
                  // poligon get...
                   var path = poly.getPath();

                  // Because path is an MVCArray, we can simply append a new coordinate
                  // and it will automatically appear
                    path.push(myCarsLatVal[count],myCarsLangVal[count]);

                 // Add a new marker at the new plotted point on the polyline.
                    var markersArray[count] = new google.maps.Marker({
                    position: (myCarsLatVal[count],myCarsLangVal[count]),
                    title: '#' + path.getLength(),
                    map: map
                  });                                               

                */                              

                  if(count >= 1)
                  {

                      markersArray[count-1].setMap(null); 
                  }
                  if(count == 28)
                  {
                        count = 0;  markersArray[28].setMap(null);
                  } 




                  google.maps.event.addListener(markersArray[count], 'click', function() {infowindow.open(map,markersArray[count]);});        
                  var infowindow = new google.maps.InfoWindow({
                     content: 'Vehicle No : DL 1R Y-1295  <br />'+ 'Latitude : ' +myCarsLatVal[count] + '<br /> Longitude : ' +myCarsLangVal[count] +'<br /> Driver Name : Ram Kumar <br /> Hemisphere : NE  <br /> Driver Mobile :<a href="tel:+8447264179">call 8447264179</a>' 
                   });

           // .......................car2..................  
              count1++; 
                  markersArray1[count1] = 
                        new google.maps.Marker({position : new google.maps.LatLng(myCarsLatValr[count1],myCarsLangValr[count1]),
                                                Icon     :"<?php echo base_url();?>/images/taxi1.png",                                      
                                                map      : map}); 
                  if(count1 >= 1)
                  {
                      markersArray1[count1-1].setMap(null); 
                  }
                  if(count1 == 28)
                  {
                        count1 = 0;  markersArray1[28].setMap(null);
                  } 


                 google.maps.event.addListener(markersArray1[count1], 'click', function() {infowindow1.open(map,markersArray1[count1]);});        
                  var infowindow1 = new google.maps.InfoWindow({
                     content: 'Vehicle No : DL 9P H-5205 <br />'+ 'Latitude : ' +myCarsLatValr[count1] + '<br /> Longitude : ' +myCarsLangValr[count1] +'<br /> Driver Name : Mahesh Kumar<br /> Hemisphere : SW  <br /> Driver Mobile : <a href="tel:+9304466524">call 9304466524 </a>'
                   });

        }
                //marker.setMap(map);
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
4

1 回答 1

0

下面是一个示例,它沿路线服务的折线对标记进行动画处理(因此它跟随道路)。

这是您的页面的一个版本,它在标记移动时绘制折线。它最终会在 IE(8) 中发生堆栈溢出,但应该可以帮助您入门。

于 2012-08-16T12:09:57.387 回答