Как перемещать маркеры в API Google Maps?

-1

Я хочу переместить 2 маркера на одну и ту же карту Google, но я не могу найти проблему в своем коде. Я могу перенести 1-й маркер, но я не могу переместить второй, можно перемещать два маркера одновременно на одной карте? Как я могу перемещать 2 маркера одновременно?Как перемещать маркеры в API Google Maps?

<!DOCTYPE html> 
<html> 
    <head> 
    <title>HTML5</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=650, user-scalable=yes"> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     } 

     #mapcanvas { 
     height: 97%; 
     } 

     #info { 
     width: auto; 
     margin: 5px; 
     height: 3%; 
     } 
    </style> 

    <script> 
     var map; 
     var latLonList = [ 
     { lat: 45.54169245190391, lon: -73.53928729891777 }, 
     { lat: 45.54173002374242, lon: -73.53945091366768 }, 
     { lat: 45.541743173879944, lon: -73.53949382901192 }, 
     { lat: 45.541790138631775, lon: -73.53962525725365 }, 
     { lat: 45.541844617694764, lon: -73.53980496525764 }, 
     { lat: 45.54189721811927, lon: -73.5399578511715 }, 
     { lat: 45.54193666840536, lon: -73.5401026904583 }, 
     { lat: 45.54198363299557, lon: -73.5402475297451 }, 
     { lat: 45.542068169159045, lon: -73.5405720770359 }, 
     { lat: 45.54214706946365, lon: -73.54082688689232 }, 
     { lat: 45.54222221250792, lon: -73.54105487465858 }, 
     { lat: 45.54226729828628, lon: -73.54119434952736 }, 
     { lat: 45.54235746973452, lon: -73.54123994708061 }, 
     { lat: 45.542543447889805, lon: -73.5411112010479 }, 
     { lat: 45.542718154081314, lon: -73.54099586606026 }, 
     { lat: 45.54289661683465, lon: -73.54089394211769 }, 
     { lat: 45.54298866582284, lon: -73.54103341698647 }, 
     { lat: 45.54308071466031, lon: -73.54133650660515 }, 
     { lat: 45.543180277518914, lon: -73.5413445532322 }, 
     { lat: 45.54330050413203, lon: -73.54127749800682 }, 
     { lat: 45.54337001002545, lon: -73.54111924767494 } 
     ] 

     $(document).ready(function() { 
     var mapOptions = { 
      zoom: 13, 
      center: new google.maps.LatLng(43, 0), 
     }; 

     map = new google.maps.Map($('#mapcanvas')[0], mapOptions); 

     //********************************************************************* 
     // Add the layer showing the inventory 
     //********************************************************************* 

     var marker = null; 
     var markerTwo = null; 
     var i = 0; 
     var j = 1; 

     function autoUpdate() { 
      navigator.geolocation.getCurrentPosition(function (position) { 

      var newPoint = new google.maps.LatLng(latLonList[i].lat, latLonList[i].lon); 

      var secondPoint = new google.maps.LatLng(latLonList[j].lat, latLonList[j].lon); 


      if (marker) { 
       // Marker already created - Move it 
       marker.setPosition(newPoint); 
      } 
      else { 
       // Marker does not exist - Create it 
       marker = new google.maps.Marker({ 
       position: newPoint, 
       map: map, 
       draggable: true 
       }); 
      } 

      if (markerTwo) { 
       // Marker already created - Move it 
       markerTwo.setPosition(secondPoint); 
      } 
      else { 
       // Marker does not exist - Create it 
       markerTwo = new google.maps.Marker({ 
       position: secondPoint, 
       map: map, 
       draggable: true 
       }); 
      } 

      map.setCenter(newPoint); 
      }); 

      // Call the autoUpdate() function every 5 seconds 
      setTimeout(autoUpdate, 3000); 
      if (i == 20) { 
      i = 0 
      } 
      else { 
      i++; 
      } 
     } 

     if (j == 19) { 
      j = 0 
     } 
     else { 
      j++; 
     } 
     autoUpdate(); 
     });//end document ready 
    </script> 
    </head> 
    <body> 
    <div id="info">trying to update location every 5 secs - new latitude longitude : <span id="coordinates"></span></div> 
    <div id="mapcanvas"> 
    </div> 
    </body> 
</html>

источник

2015-06-27 ARIF Ramzi

Мы не сможем найти проблему в коде либо, если вы не показываете нам. – phuzi

https://www.dropbox.com/s/evqklv46kuen45k/googlemaps.html?dl=0 –

У вас больше шансов получить помощь, если вы добавите фактический код в вопрос, так как его легче добраться и будет доступный навсегда. Если код находится где-нибудь еще, есть шанс, что он не будет доступен. Что делать, если у кого-то нет или нет, учетной записи DropBox? – phuzi

ответ:

map=new google.maps.Map($('#mapcanvas')[0], mapOptions); 



      //********************************************************************* 
      // Add the layer showing the inventory 
      //********************************************************************* 

       var marker = null; 
       var marker2 = null ; 
       var i = 0; 
       function autoUpdate() { 


        navigator.geolocation.getCurrentPosition(function(position, pos) { 
         //var newPoint = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
         var newPoint = new google.maps.LatLng(latLonList[i].lat, latLonList[i].lon); 

         var myLatlng = new google.maps.LatLng(latLonList[i+1].lat, latLonList[i+1].lon); 

         if (marker2) { 
          // Marker already created - Move it 
          marker2.setPosition(myLatlng); 
         } 
         else { 
           marker2 = new google.maps.Marker({ 
           position: myLatlng, 
           map: map, 
           title: 'Client 2' 

          }); 
         } 
         if (marker) { 
          // Marker already created - Move it 
          marker.setPosition(newPoint); 
         } 
         else { 
          // Marker does not exist - Create it 
          marker = new google.maps.Marker({ 
           position: newPoint, 
           map: map, 
           title: 'Client 1' 

          }); 
         } 



         // Center the map on the new position 
         map.setCenter(myLatlng); 
        }); 

        // Call the autoUpdate() function every 5 seconds 
        setTimeout(autoUpdate, 3000); 
        if (i == 19) 
         i = 0 
        else 
         i++; 
       } 

       autoUpdate(); 


     });//end document ready

источник

2015-06-27 12:16:43

В чем была проблема? – geocodezip

для второго маркера * marker2 * i code it: marker.setPosition (myLatlng); поэтому я изменил маркер2.setPosition (myLatlng); система путается между двумя маркерами: P –

http://geekonjava.blogspot.in/2014/10/how-to-make-animated-moving-marker-on.html

Следуйте по этой ссылке Это воля помогает вам

html{height:100%;} 
 
body{height:100%;margin:0px;font-family: Helvetica,Arial;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
<title>GeekOnJava: Directions Complex</title> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script type ="text/javascript" src="http://www.geocodezip.com/scripts/v3_epoly.js"></script> 
 
<script type="text/javascript"> 
 
    var map; 
 
    var directionDisplay; 
 
    var directionsService; 
 
    var stepDisplay; 
 
    
 
    var position; 
 
    var marker = []; 
 
    var polyline = []; 
 
    var poly2 = []; 
 
    var poly = null; 
 
    var startLocation = []; 
 
    var endLocation = []; 
 
    var timerHandle = []; 
 
    
 
    
 
    var speed = 0.000005, wait = 1; 
 
    var infowindow = null; 
 
    
 
    var myPano; 
 
    var panoClient; 
 
    var nextPanoId; 
 
    
 
    var startLoc = new Array(); 
 
    startLoc[0] = 'rio claro, trinidad'; 
 
    startLoc[1] = 'preysal, trinidad'; 
 
    startLoc[2] = 'san fernando, trinidad'; 
 
    startLoc[3] = 'couva, trinidad'; 
 

 
    var endLoc = new Array(); 
 
    endLoc[0] = 'princes town, trinidad'; 
 
    endLoc[1] = 'tabaquite, trinidad'; 
 
    endLoc[2] = 'mayaro, trinidad'; 
 
    endLoc[3] = 'arima, trinidad'; 
 

 

 
    var Colors = ["#FF0000", "#00FF00", "#0000FF"]; 
 

 

 
function initialize() { 
 

 
    infowindow = new google.maps.InfoWindow(
 
    { 
 
     size: new google.maps.Size(150,50) 
 
    }); 
 

 
    var myOptions = { 
 
     zoom: 16, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
    address = 'Trinidad and Tobago' 
 
    geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 'address': address}, function(results, status) { 
 
    map.fitBounds(results[0].geometry.viewport); 
 

 
    }); 
 
    // setRoutes(); 
 
    } 
 

 

 
function createMarker(latlng, label, html) { 
 
// alert("createMarker("+latlng+","+label+","+html+","+color+")"); 
 
    var contentString = '<b>'+label+'</b><br>'+html; 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     title: label, 
 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
 
     }); 
 
     marker.myname = label; 
 

 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent(contentString); 
 
     infowindow.open(map,marker); 
 
     }); 
 
    return marker; 
 
} 
 

 
function setRoutes(){ 
 

 
    var directionsDisplay = new Array(); 
 

 
    for (var i=0; i< startLoc.length; i++){ 
 

 
    var rendererOptions = { 
 
     map: map, 
 
     suppressMarkers : true, 
 
     preserveViewport: true 
 
    } 
 
    directionsService = new google.maps.DirectionsService(); 
 

 
    var travelMode = google.maps.DirectionsTravelMode.DRIVING; 
 

 
    var request = { 
 
     origin: startLoc[i], 
 
     destination: endLoc[i], 
 
     travelMode: travelMode 
 
    }; 
 

 
     directionsService.route(request,makeRouteCallback(i,directionsDisplay[i])); 
 

 
    } 
 

 

 
    function makeRouteCallback(routeNum,disp){ 
 
     if (polyline[routeNum] && (polyline[routeNum].getMap() != null)) { 
 
     startAnimation(routeNum); 
 
     return; 
 
     } 
 
     return function(response, status){ 
 
      
 
      if (status == google.maps.DirectionsStatus.OK){ 
 

 
      var bounds = new google.maps.LatLngBounds(); 
 
      var route = response.routes[0]; 
 
      startLocation[routeNum] = new Object(); 
 
      endLocation[routeNum] = new Object(); 
 

 

 
      polyline[routeNum] = new google.maps.Polyline({ 
 
      path: [], 
 
      strokeColor: '#FFFF00', 
 
      strokeWeight: 3 
 
      }); 
 

 
      poly2[routeNum] = new google.maps.Polyline({ 
 
      path: [], 
 
      strokeColor: '#FFFF00', 
 
      strokeWeight: 3 
 
      });  
 

 

 
      // For each route, display summary information. 
 
      var path = response.routes[0].overview_path; 
 
      var legs = response.routes[0].legs; 
 

 

 
      disp = new google.maps.DirectionsRenderer(rendererOptions);  
 
      disp.setMap(map); 
 
      disp.setDirections(response); 
 

 

 
      //Markers    
 
      for (i=0;i<legs.length;i++) { 
 
       if (i == 0) { 
 
       startLocation[routeNum].latlng = legs[i].start_location; 
 
       startLocation[routeNum].address = legs[i].start_address; 
 
       // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
 
       marker[routeNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); 
 
       } 
 
       endLocation[routeNum].latlng = legs[i].end_location; 
 
       endLocation[routeNum].address = legs[i].end_address; 
 
       var steps = legs[i].steps; 
 

 
       for (j=0;j<steps.length;j++) { 
 
       var nextSegment = steps[j].path;     
 
       var nextSegment = steps[j].path; 
 

 
       for (k=0;k<nextSegment.length;k++) { 
 
        polyline[routeNum].getPath().push(nextSegment[k]); 
 
        //bounds.extend(nextSegment[k]); 
 
       } 
 

 
       } 
 
      } 
 

 
     }  
 

 
     polyline[routeNum].setMap(map); 
 
     //map.fitBounds(bounds); 
 
     startAnimation(routeNum); 
 

 
    } // else alert("Directions request failed: "+status); 
 

 
    } 
 

 
} 
 

 
    var lastVertex = 1; 
 
    var stepnum=0; 
 
    var step = 50; // 5; // metres 
 
    var tick = 100; // milliseconds 
 
    var eol= []; 
 
//----------------------------------------------------------------------     
 
function updatePoly(i,d) { 
 
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow 
 
    if (poly2[i].getPath().getLength() > 20) { 
 
      poly2[i]=new google.maps.Polyline([polyline[i].getPath().getAt(lastVertex-1)]); 
 
      // map.addOverlay(poly2) 
 
     } 
 

 
    if (polyline[i].GetIndexAtDistance(d) < lastVertex+2) { 
 
     if (poly2[i].getPath().getLength()>1) { 
 
      poly2[i].getPath().removeAt(poly2[i].getPath().getLength()-1) 
 
     } 
 
      poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),polyline[i].GetPointAtDistance(d)); 
 
    } else { 
 
     poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),endLocation[i].latlng); 
 
    } 
 
} 
 
//---------------------------------------------------------------------------- 
 

 
function animate(index,d) { 
 
    if (d>eol[index]) { 
 

 
     marker[index].setPosition(endLocation[index].latlng); 
 
     return; 
 
    } 
 
    var p = polyline[index].GetPointAtDistance(d); 
 

 
    //map.panTo(p); 
 
    marker[index].setPosition(p); 
 
    updatePoly(index,d); 
 
    timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick); 
 
} 
 

 
//------------------------------------------------------------------------- 
 

 
function startAnimation(index) { 
 
     if (timerHandle[index]) clearTimeout(timerHandle[index]); 
 
     eol[index]=polyline[index].Distance(); 
 
     map.setCenter(polyline[index].getPath().getAt(0)); 
 

 
     poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3}); 
 

 
     timerHandle[index] = setTimeout("animate("+index+",50)",2000); // Allow time for the initial map display 
 
} 
 

 
//----------------------------------------------------------------------------  
 
</script> 
 
</head> 
 
    
 
<body onload="initialize()"> 
 

 
<div id="tools"> 
 

 
    <button onclick="setRoutes();">Start</button> 
 

 
</div> 
 

 
<div id="map_canvas" style="width:100%;height:100%;"></div> 
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
 
</script> 
 
<script type="text/javascript"> 
 
_uacct = "UA-162157-1"; 
 
urchinTracker(); 
 
</script> 
 
</body> 
 
</html>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>GeekOnJava: Directions Complex</title> 


<style> 
html 
{ 
    height:100%; 
} 
body 
{ 
    height:100%; 
    margin:0px; 
    font-family: Helvetica,Arial; 
} 
</style>

источник

2015-12-28 05:51:15

Пожалуйста, добавьте некоторые фрагменты из этой ссылки, а не публикуйте ее. –

Я тестировал его и его работу для меня! и сожалею о том, что ссылка для публикации только я не знаю, потому что я просто новый в переполнении стека. Так извините, о не сделайте этого. –

<script type="text/javascript"> 

    var map; 
    var geocoder; 
    var marker; 
    var people = new Array(); 
    var people2 = new Array(); 
    var latlng; 
    var infowindow; 
    var lats=6.9271; 
    var markersz = new google.maps.Marker; 
    var markers2 = new google.maps.Marker; 


    $(document).ready(function() { 

     var mapOptions = { 
      center: new google.maps.LatLng(7.8731, 80.7718), // Coimbatore = (11.0168445, 76.9558321) 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 


     ViewCustInGoogleMap(); 
    }); 

    window.setInterval(function(){ 
     ViewCustInGoogleMap(); 
     }, 5000); 

    function ViewCustInGoogleMap() { 
     //deleting the previous set mark on the map 
     markersz.setMap(null); 
     markers2.setMap(null); 

    lats = lats+0.01; 

     // Get data from database. It should be like below format or you can alter it. 

     var data = '[{ "DisplayText": "DULA TEST<br/><h1>HHH</h1><a href=https://www.google.lk?st=kk target=_blank>CLICK</a>", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "'+lats+',79.8612", "MarkerId": "Customer"}]'; 
     people = JSON.parse(data); 
     for (var i = 0; i < people.length; i++) { 
      markersz = setMarker(people[i]); 
     } 
     //----------------------------------------------------------------------------------------------------------------- 
     //getting lats and longs from the controller 
     $.ajax({ 
     type: 'post', 
     url: 'http://localhost/GPS/Login/latsAndLongs', 
     data: "", 
     dataType: 'json', 
     success: function(response) { 
      people2 = JSON.parse(response); 
      for (var i = 0; i < people2.length; i++) { 
       //setting the current mark and returning the mark object so that it can be deleted in the next iteration 
       markers2=setMarker2(people2[i]); 
      } 
     } 
     }); 
     //var data2 = '[{ "DisplayText": "DULA TEST2", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "6.5854,79.9607", "MarkerId": "Seller"}]'; 
     }

// ---------------------------- -----------------------------------------

function setMarker(people) { 
     geocoder = new google.maps.Geocoder(); 
     infowindow = new google.maps.InfoWindow(); 
     if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) { 
      geocoder.geocode({ 'address': people["Address"] }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 
        marker = new google.maps.Marker({ 
         position: latlng, 
         map: map, 
         draggable: false, 
         html: people["DisplayText"], 
         icon: "https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png" 
        }); 
        //marker.setPosition(latlng); 
        //map.setCenter(latlng); 
        google.maps.event.addListener(marker, 'click', function(event) { 
         infowindow.setContent(this.html); 
         infowindow.setPosition(event.latLng); 
         infowindow.open(map, this); 
        }); 
       } 
       else { 
        //alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found"); 
       } 
      }); 
     } 
     else { 
      marker = new google.maps.Marker; 
      var latlngStr = people["LatitudeLongitude"].split(","); 
      var lat = parseFloat(latlngStr[0]); 
      var lng = parseFloat(latlngStr[1]); 
      latlng = new google.maps.LatLng(lat, lng); 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       draggable: false,    // cant drag it 
       html: people["DisplayText"], // Content display on marker click 
       icon: "http://www.myiconfinder.com/uploads/iconsets/256-256-a5485b563efc4511e0cd8bd04ad0fe9e.png"  // Give ur own image 
      }); 

      //marker.setMap(null); 
      //marker.setPosition(latlng); 
      //map.setCenter(latlng); 
      google.maps.event.addListener(marker, 'click', function(event) { 
       infowindow.setContent(this.html); 
       infowindow.setPosition(event.latLng); 
       infowindow.open(map, this); 
      }); 
      return marker; 
     } 
    } 
    //----------------------------- 
    function setMarker2(people) { 
     geocoder = new google.maps.Geocoder(); 
     infowindow = new google.maps.InfoWindow(); 
     if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) { 
      geocoder.geocode({ 'address': people["Address"] }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 
        marker = new google.maps.Marker({ 
         position: latlng, 
         map: map, 
         draggable: false, 
         html: people["DisplayText"], 
         icon: "https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png" 
        }); 
        //marker.setPosition(latlng); 
        //map.setCenter(latlng); 
        google.maps.event.addListener(marker, 'click', function(event) { 
         infowindow.setContent(this.html); 
         infowindow.setPosition(event.latLng); 
         infowindow.open(map, this); 
        }); 
       } 
       else { 
        alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found"); 
       } 
      }); 
     } 
     else { 
      var latlngStr = people["LatitudeLongitude"].split(","); 
      var lat = parseFloat(latlngStr[0]); 
      var lng = parseFloat(latlngStr[1]); 
      latlng = new google.maps.LatLng(lat, lng); 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       draggable: false,    // cant drag it 
       html: people["DisplayText"], // Content display on marker click 
       icon: "https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png"  // Give ur own image 
      }); 
      //marker.setPosition(latlng); 
      //map.setCenter(latlng); 
      google.maps.event.addListener(marker, 'click', function(event) { 
       infowindow.setContent(this.html); 
       infowindow.setPosition(event.latLng); 
       infowindow.open(map, this); 
      }); 
     } 
     return marker; 
    } 

</script>

источник

2016-11-03 09:35:02

Переместить список маркеров и объектов lar marker при повторении. 1. Получите Imei_no. 2. Нажмите imei_no в переменной. 3. Создайте карту. 4. Получите подробную информацию на основе imei_no. 5. Создатель. 6. Создатель штамповки в тесте. 7. Удалить маркер. 8. Вернитесь к автообновлению.

Живой Tracking Совершено Sureshchan ...

 if (true) {    

      var listimei = []; 
      $scope.listimei = []; 

      $http.get('school/transport/scroute/viewIMEI?imeiNo=' + routeid).success(function(response) { 
       //1. 
       console.log(response); 
       if (response.viewRoute == 0) { 
        logger.logError("IMEI No. not available"); 
        $state.go("app.school.scTransport.scVehicleTracking.list"); 

       } else { 

        //brown 
        $scope.brown = response.viewRoute[0].emptveh; 

        //2. 
        for (var b = 0; b < response.viewRoute.length; b++) { 
         listimei.push(response.viewRoute[b].imeiNo);       
        } 


         //3. 
         var mapOptions = { 
           center: new google.maps.LatLng(13.0037, 80.1476), 
           zoom: 17, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
           }; 

           var map = new google.maps.Map(document.getElementById('viewallmap'), mapOptions); 

           var infoWindow = new google.maps.InfoWindow; 
          var test = []; 
          var marker; 


         function autoUpdate() {        

          if (marker == null){ 

           $scope.locData = []; 
           var y = 0; 
           var g = 0; 
           var r = 0; 
           var n = 0; 



            $http.get('school/transport/scroute/getListImei?imeiNo=' + listimei).success(function(response) { 
             //4. 
             console.log(response); 
             $scope.assetloader = true; 
             for(var l = 0;l<response.viewImeiList.length;l++){           

              //time 
              var startTime = new Date(); 
              var endTime = new Date(response.viewImeiList[l].lastmove); 
              var difference = startTime.getTime() - endTime.getTime(); 
              var resultInMinutes = difference/60000; 
              var result = Math.round(resultInMinutes); 

              //for date       
              var dateObj = new Date(response.viewImeiList[l].lastmove); 
              var month1 = ("0" + (dateObj.getUTCMonth() + 1)).slice(-2);//months from 1-12 
              var day1 = ("0" + dateObj.getUTCDate()).slice(-2); 
              var year1 = dateObj.getUTCFullYear(); 
              var testdate = year1 + "-" + month1 + "-" + day1;           
              var now = new Date(); 
              var day = ("0" + now.getDate()).slice(-2); 
              var month = ("0" + (now.getMonth() + 1)).slice(-2); 
              var today = now.getFullYear() + "-" + (month) + "-" + (day); 

              if (response.viewImeiList[l].nosignal == 1) { 
               $scope.black = n + 1; 
               n++; 
              }else if(testdate != today){ 
               $scope.black = n + 1; 
               n++; 
               var title = '<b>Vehicle No : </b> ' + response.viewImeiList[l].vehname + '<br> <b>IMEI No : </b> ' + response.viewImeiList[l].imeiNo + '<br> <b>Reg No : </b> ' + response.viewImeiList[l].regno + '<br> <b> Speed : </b> ' + response.viewImeiList[l].speed + ' KMPH <br> <b> Over Speed Limit : </b> 50 KMPH <br> <b> Last Movement Detected Time : </b> ' + response.viewImeiList[l].lastmove + '<br>'; 
               $scope.view = []; 
               $scope.view.push(response.viewImeiList[l].vehname, title,response.viewImeiList[l].latitude, response.viewImeiList[l].longitude, "000000","FFFFFF"); 
               $scope.locData.push($scope.view); 
              }            
              else if (response.viewImeiList[l].speed == 0) { 
               $scope.yellow = y + 1; 
               y++; 
               var title = '<b>Vehicle No : </b> ' + response.viewImeiList[l].vehname + '<br> <b>IMEI No : </b> ' + response.viewImeiList[l].imeiNo + '<br> <b>Reg No : </b> ' + response.viewImeiList[l].regno + '<br> <b> Speed : </b> ' + response.viewImeiList[l].speed + ' KMPH <br> <b> Over Speed Limit : </b> 50 KMPH <br> <b> Last Movement Detected Time : </b> ' + response.viewImeiList[l].lastmove + '<br>'; 
               $scope.view = []; 
               $scope.view.push(response.viewImeiList[l].vehname, title,response.viewImeiList[l].latitude, response.viewImeiList[l].longitude, "e5ff00","000000"); 
               $scope.locData.push($scope.view); 
              } else if (response.viewImeiList[l].speed != 0 && result > 15) { 
               $scope.yellow = y + 1; 
               y++; 
               var title = '<b>Vehicle No : </b> ' + response.viewImeiList[l].vehname + '<br> <b>IMEI No : </b> ' + response.viewImeiList[l].imeiNo + '<br> <b>Reg No : </b> ' + response.viewImeiList[l].regno + '<br> <b> Speed : </b> ' + response.viewImeiList[l].speed + ' KMPH <br> <b> Over Speed Limit : </b> 50 KMPH <br> <b> Last Movement Detected Time : </b> ' + response.viewImeiList[l].lastmove + '<br>'; 
               $scope.view = []; 
               $scope.view.push(response.viewImeiList[l].vehname, title, response.viewImeiList[l].latitude, response.viewImeiList[l].longitude, "e5ff00","000000"); 
               $scope.locData.push($scope.view); 
              } else if (response.viewImeiList[l].speed > 50 && result < 15) { 
               $scope.red = r + 1; 
               r++; 
               var title = '<b>Vehicle No : </b> ' + response.viewImeiList[l].vehname + '<br> <b>IMEI No : </b> ' + response.viewImeiList[l].imeiNo + '<br> <b>Reg No : </b> ' + response.viewImeiList[l].regno + '<br> <b> Speed : </b> ' + response.viewImeiList[l].speed + ' KMPH <br> <b> Over Speed Limit : </b> 50 KMPH <br> <b> Last Movement Detected Time : </b> ' + response.viewImeiList[l].lastmove + '<br>'; 
               $scope.view = []; 
               $scope.view.push(response.viewImeiList[l].vehname, title, response.viewImeiList[l].latitude, response.viewImeiList[l].longitude, "FF0000","000000"); 
               $scope.locData.push($scope.view); 
              } else { 
               $scope.green = g + 1; 
               g++; 
               var title = '<b>Vehicle No : </b> ' + response.viewImeiList[l].vehname + '<br> <b>IMEI No : </b> ' + response.viewImeiList[l].imeiNo + '<br> <b>Reg No : </b> ' + response.viewImeiList[l].regno + '<br> <b> Speed : </b> ' + response.viewImeiList[l].speed + ' KMPH <br> <b> Over Speed Limit : </b> 50 KMPH <br> <b> Last Movement Detected Time : </b> ' + response.viewImeiList[l].lastmove + '<br>'; 
               $scope.view = []; 
               $scope.view.push(response.viewImeiList[l].vehname, title, response.viewImeiList[l].latitude, response.viewImeiList[l].longitude, "00ff00","000000"); 
               $scope.locData.push($scope.view); 
              } 

             } 

              var locations = $scope.locData; 

              for (var i = 0; i < locations.length; i++) { 
                var city = locations[i][0]; 
                var state = locations[i][1]; 
                var lat = locations[i][2]; 
                var lng = locations[i][3]; 
                var desc = locations[i][4]; 
                var textcol = locations[i][5]; 
                var z = i; 
                var myLatLng = new google.maps.LatLng(lat, lng); 

                var content = '<div class="map-content"><h3>' + state + 
                 '</h3></div>'; 

                //5. 

                marker = new google.maps.Marker({ 
                 map: map, 
                 title: state, 
                 position: myLatLng, 
                 icon : 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + city + '|' + desc + '|' +textcol, 
                 draggable : true, 
                 zIndex: z 
                }); 

                //6. 
                test.push(marker); 

                //mouseover 
                google.maps.event.addListener(marker, 'click', (function(marker, content) { 
                 return function() { 
                  infoWindow.setContent(content); 
                  infoWindow.open(map, marker); 
                 } 
                })(marker, content)); 

                // add the double-click event listener 
                google.maps.event.addListener(marker, 'dblclick', function(event){ 
                 map = marker.getMap(); 

                 map.setCenter(overlay.getPosition()); // set map center to marker position 
                 smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level 
                }) 


                // the smooth zoom function 
                function smoothZoom (map, max, cnt) { 
                 if (cnt >= max) { 
                   return; 
                  } 
                 else { 
                  y = google.maps.event.addListener(map, 'zoom_changed', function(event){ 
                   google.maps.event.removeListener(y); 
                   self.smoothZoom(map, max, cnt + 1); 
                  }); 
                  setTimeout(function(){map.setZoom(cnt)}, 80); 
                 } 
                } 
              } 
            });    
            myVar = setTimeout(autoUpdate, 40000); 
          } 

          if(test.length !=0){ 
           //7. 
           for (var k = 0; k < test.length; k++) { 
            if (test[k].getMap() != null) { 
             test[k].setMap(null); 
            }           

            } 

           test1(); 

          } 

         }  

         function test1(){ 
          //8. 
          test = []; 
          marker = null; 
          autoUpdate(); 

         } 


         autoUpdate();      



       } 

      }); 

     }

источник

2017-09-12 05:37:52 sureshchann

Как перемещать маркеры в API Google Maps?

ответ

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