Question

我必须在谷歌地图中显示车辆运动，所以点击组我进行ajax调用它得到lat lng和所有车辆的一些信息然后我在地图上放置一个标记。这里如果车辆移动下一个ajax调用我得到diff lat lng那时我显示转换效果到标记。这给了我一个问题，

这是我的Ajax回调函数，

function callBackFunction(http_request) {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {


        var rs = http_request.responseText;
       //here rs is as follow in servlet  fstring=fstring+lat+","+lng+"$"+vn+"@notsame@"+busImg+"@"+drvcdr+"#";
       var SlNo=0;
       var position="";
       var busImg="";
       clear_Icon();  
       while(rs.length)
       {
           lat=rs.substring(0,rs.indexOf(","));
           lng=rs.substring(rs.indexOf(",")+1,rs.indexOf("$"));
           vn=rs.substring(rs.indexOf("$")+1,rs.indexOf("@"));
           rs=rs.substring(rs.indexOf("@")+1);
           position=rs.substring(0,rs.indexOf("@"));
           rs=rs.substring(rs.indexOf("@")+1);

           busImg=rs.substring(0,rs.indexOf("@"));
           rs=rs.substring(rs.indexOf("@")+1);
           drvcdr=rs.substring(0,rs.indexOf("#")); 
           add_icon(lat,lng,SlNo,vn,position,busImg,drvcdr);

           rs=rs.substring(rs.indexOf("#")+1);
           SlNo++;
       }

    } else {
        alert('ERR OR: AJAX request status = ' + http_request.status);
    }
}
}

放置标记和过渡效果，

function add_icon(lt, ln,n,vn,position,busImg,drvcdr)  {

        var point = new google.maps.LatLng( lt, ln);
        //alert("Icon: "+busImg);

        marker= createMarker(point,n,vn,position,busImg,drvcdr);
        alert("After Marker placed:"+point.lat()+"  "+point.lng());
        transitionnn(point);
      }

  var gmarkers = [];

  function createMarker(point, number,vn,position,busImg,drvcdr) {

            var angleDegrees = 150;
               var marker = new google.maps.Marker({
                  position: point,
                  map: map,
                  raiseOnDrag: true,
                  icon:busImg,

                 // animation: google.maps.Animation.DROP,
                  draggable: false,
                  zIndex: number,
                  id:vn,
                  drvcddr:drvcdr


              });             

      var html = number;

      var infowindow = new google.maps.InfoWindow({
          content: 'Latitude: ' + point.lat() +
          '<br>Longitude: ' + point.lng()  + '<br>BusNo : '+ marker.get("id")+ '<br>DrivrConductor : '+ marker.get("drvcddr"), 
          maxwidth: 1000
      });

      google.maps.event.addListener(marker, 'click', function() {
        //map.setZoom(15);
        map.setCenter(marker.getPosition());
          infowindow.open(map,marker);
          });

      gmarkers.push(marker);
      return marker;
    };

    function transitionnn(point)
    {
      var result = [point.lat(), point.lng()];
      transition(result);
    }

    var numDeltas = 100;
    var delay = 100; //milliseconds
    var i = 0;
    var deltaLat;
    var deltaLng;


    function transition(result){

        i = 0;
        deltaLat = (result[0] - position[0])/numDeltas;
        deltaLng = (result[1] - position[1])/numDeltas;
        moveMarker();
    }

    function moveMarker(){
        position[0] += deltaLat;
        position[1] += deltaLng;
        var latlng = new google.maps.LatLng(position[0], position[1]);
        marker.setPosition(latlng);
        if(i!=numDeltas){
            i++;
            setTimeout(moveMarker, delay);
        }
    }

问题是，在地图中我得到了标记但没有准确的位置和过渡效果也没有显示出来。我不知道我哪里出错了任何人都可以帮我解决这个问题。谢谢。

Answer 1

我认为这基本上就是你想要的效果。

我的所作所为：4辆汽车从布鲁塞尔开始;每次单击按钮，您都会获得下一个积分。每个标记都会转换到新的位置。

数据应该来自某个DB（左右）;我只使用3套位置（每辆车）

注意：你不使用jQuery。所以我用原始的javascript

制作了（种类）$ .ajax的最小版本

ajax_json.php

<?php
$locations = json_decode(
  '[
    [{"lat": 50.8454638, "lng": 4.33719938}, {"lat": 50.8555429, "lng": 4.35711210}, {"lat": 50.8454638, "lng": 4.369300}, {"lat": 50.8331057, "lng": 4.35711210}],
    [{"lat": 51.0540382, "lng": 3.72185772}, {"lat": 51.2199126, "lng": 4.40142220}, {"lat": 50.96458043, "lng": 5.493295848}, {"lat": 50.45450295, "lng": 3.95242041}],
    [{"lat": 51.20249156, "lng": 3.22428649}, {"lat": 51.92036145, "lng": 4.4799894}, {"lat": 50.936165, "lng": 6.96152633}, {"lat": 49.258189, "lng": 4.03229659}]
]');

$t = isset($_GET['t']) ? (int) $_GET['t'] : 0;
echo json_encode(array('locations'=> $locations[$t], 'get'=> print_r($_GET, 1) ));
?>

的index.php

<style>
  #map_canvas {
    width: 700px;
    height: 500px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script>
  // a few globals
  var t = 0;
  var markers = [];  // let's keep this global, so we can easily access it everywhere
  var map;
  // settings (100 steps, each step is 20ms apart)
  var interval = 20;
  var steps = 100;

  // this function makes an Ajax call, to get the locations of the car.
  function getNextLocations() {
    ajax({
      success: receiveNextLocations,
      url: 'ajax_json.php?t=' + t,
      dataType: 'json'
    });
    t++;
  }
  // callback for the ajax call.  Gets triggerd when the next locations are received from the server
  function receiveNextLocations(data) {
    for (var i=0; i<data.locations.length; i++) {
      if (markers[i]) {
        // update marker position, we use transition
        markerTransition(markers[i], markers[i].getPosition(), new google.maps.LatLng(data.locations[i].lat, data.locations[i].lng), 0);
      }
      else {
        // new marker
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.locations[i].lat, data.locations[i].lng),
          map: map
        });
        // we store the markers in an array
        markers.push(marker);
      }
    }
  }
  // recursive function.  Takes a marker and moves it to a destination, in many steps
  function markerTransition(marker, oldPosition, newPosition, i) {
    // we calculate the temporary position
    var tempPosition = new google.maps.LatLng(
      oldPosition.lat() + i * (newPosition.lat() - oldPosition.lat()) / steps,
      oldPosition.lng() + i * (newPosition.lng() - oldPosition.lng()) / steps    
    );
    marker.setPosition(tempPosition);
    if(i<steps) {
      setTimeout(function() {
          markerTransition(marker, oldPosition, newPosition, i+1);
        },
        interval
      );
    }
  }

  // initialize Google Maps
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(50.8, 4.7),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
  // ajax function that looks a bit like jQuery $.ajax
  // minimal code for what I need; not dummy proof, no error handling ...
  // feel free to extend this
  var http_request = new XMLHttpRequest();
  function ajax(options) {
    http_request.open(options.type || 'GET', options.url, true);
    http_request.send(options.data || null);
    http_request.onreadystatechange = function() {
      if (http_request.readyState == 4) {
        if (http_request.status == 200) {
          var type = options.dataType || '';
          switch (type.toLowerCase()) {
            default: 
              options.success(http_request.responseText);
              break;
            case 'json': 
              options.success(JSON.parse(http_request.responseText));
              break;
          }
        }
      }
    }
  }
</script>
<p id="map_canvas" ></p>
<input type="button" value="Next locations" onclick="getNextLocations()"><br><br>
<div id="messages"></div>

如何放置具有过渡效果的标记组？

1 个答案: