如何重置谷歌地图v3动画步骤的价值 [英] how to reset value of steps in google maps v3 animation

查看：91
本文介绍了如何重置谷歌地图v3动画步骤的价值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的示例 http://gidzior.net/map/v3_animate_marker_directions.html （我在输入中使用了占位符），通用代码的核心来自geocodezip.com，我在Andrew Leach的大力帮助下开发代码在$ 1500

<1500>目标设置为缩放之前的动画可能会更好地到达此目标点，不幸的是，在缩放后，动画不平滑，因此我将步长值设置为15，如何在动画停止后重置此值



我设置step = 15 - if（d> eol-1500& zoomed！= true）{map.setZoom（15）;步骤= 15;放大= TRUE;


$ p $地图;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
var position;
var marker = null;
var polyline = null;
var poly2 = null;
var speed = 0.0000005，wait = 1;
var infowindow = null;
var放大;
var zoomedd;
var zoomeddd;

var myPano;
var panoClient;
var nextPanoId;
var timerHandle = null;

var size = new google.maps.Size（26,25）;
var start_point = new google.maps.Point（0,0）;
var foothold = new google.maps.Point（13,15）;

var car_icon = new google.maps.MarkerImage（http://gidzior.net/map/car.png，size，start_point，footed）;

函数createMarker（latlng，label，html）{
var contentString ='< b>'+ label +'< / b>< br>'+ html;
var marker = new google.maps.Marker（{
position：latlng，$ b $ map：map，
icon：car_icon，
clickable：false，
zIndex：Math.round（latlng.lat（）* - 100000）<5
}）;
返回标记;


$ b函数initialize（）{
infowindow = new google.maps.InfoWindow（
{
size：new google.maps .Size（150,50）
}）;
//实例化一个方向服务。
directionsService = new google.maps.DirectionsService（）;

//创建一个地图并将其集中在Warszawa上。
var myOptions = {
zoom：13，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map（document.getElementById （map_canvas），myOptions）;

address ='warszawa'
geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：address}，function（results，status）{
map.setCenter（results [0] .geometry.location）;
}）;

//为路线创建渲染器并将其绑定到地图。
var rendererOptions = {
map：map，
}
directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）;

//实例化信息窗口以保存步骤文本。
stepDisplay = new google.maps.InfoWindow（）;

polyline = new google.maps.Polyline（{
path：[]，
strokeColor：'＃FF0000'，
strokeWeight：3
} ）;
poly2 = new google.maps.Polyline（{
path：[]，
strokeColor：'＃FF0000'，
strokeWeight：3
}）;




var steps = []

函数calcRoute（）{

if（timerHandle ）{clearTimeout（timerHandle）; }
if（marker）{marker.setMap（null）;}
polyline.setMap（null）;
poly2.setMap（null）;
directionsDisplay.setMap（null）;
polyline = new google.maps.Polyline（{
path：[]，
strokeColor：'＃FF0000'，
strokeWeight：3
}）;
poly2 = new google.maps.Polyline（{
path：[]，
strokeColor：'＃FF0000'，
strokeWeight：3
}）;
//为方向创建渲染器并将其绑定到地图。
var rendererOptions = {
map：map，
suppressMarkers：true
}
directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）;

var start = document.getElementById（start）.value;
var end = document.getElementById（end）.value;
var travelMode = google.maps.DirectionsTravelMode.DRIVING

var request = {
origin：start，
destination：end，
travelMode：travelMode，
航点：[{
location：new google.maps.LatLng（52.185570,20.997255），
stopover：false}]，
optimizeWaypoints：false
};

//路线指示并将响应传递给
//函数以为每一步创建标记。
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;

var bounds = new google.maps.LatLngBounds（）;
var route = response.routes [0];
startLocation = new Object（）;
endLocation = new Object（ ）;

//对于每一条路径，显示摘要信息
var path = response.routes [0] .overview_path;
var legs = response.routes [0]。 （i = 0; i< legs.length; i ++）{
if（i == 0）{
startLocation.latlng = legs [i] .start_location;
startLocation.address = legs [i] .start_address;
// marker = google.maps.Marker（{map：map，position：startLocation.latlng}）;
marker = createMarker（legs [ i] .start_location，start，legs [i] .start_address，green）;
}
endLocation.latlng = legs [i] .end_l ocation;
endLocation.address = legs [i] .end_address;
var steps = legs [i] .steps;
for（j = 0; j var nextSegment = steps [j] .path; （k = 0; k polyline.getPath（）。push（nextSegment [k]）;
;
bounds.extend（nextSegment [k]）;



}
}
}

polyline.setMap（map）;
document.getElementById（distance）。innerHTML =（polyline.Distance（）/ 1000）.toFixed（2）+km;
map.fitBounds（bounds）;
// createMarker（endLocation.latlng，end，endLocation.address，red）;
map.setZoom（18）;
startAnimation（）;
zoomed = false;
zoomedd = false;
zoomeddd = false;
}
}）;
}



var step = 50; // 5; //米
var tick = 100; //毫秒
var eol;
var k = 0;
var stepnum = 0;
var speed =;
var lastVertex = 1;


// ===============动画功能=================== ===
function updatePoly（d）{
//每隔20个顶点产生一个新的折线，因为更新100顶点的poly太慢了
if（poly2.getPath（）。getLength （）> 20）{
poly2 = new google.maps.Polyline（[polyline.getPath（）。getAt（lastVertex-1）]）;
// map.addOverlay（poly2）
}

if（polyline.GetIndexAtDistance（d）< lastVertex + 2）{
if（poly2.getPath（ ）.getLength（）> 1）{
poly2.getPath（）。removeAt（poly2.getPath（）。getLength（） - 1）
}
poly2.getPath（）。insertAt （poly2.getPath（）的getLength（），polyline.GetPointAtDistance（d））;
} else {
poly2.getPath（）。insertAt（poly2.getPath（）。getLength（），endLocation.latlng）;




function animate（d）{
// alert（animate（+ d +））;
if（d> eol）{;
map.panTo（endLocation.latlng）;
marker.setPosition（endLocation.latlng）;
return;
}
if（d> eol-20000& z& zoomeddd！= true）{
map.setZoom（12）; //或任何值
zoomeddd = true;
}
if（d> eol-10000& zoomedd！= true）{
map.setZoom（13）; //或任何值
zoomedd = true;
}
if（d> eol-1500&& zoomed！= true）{
map.setZoom（15）; //或任何值
step = 15;
zoomed = true;
}
var p = polyline.GetPointAtDistance（d）;
map.panTo（p）;
marker.setPosition（p）;
updatePoly（d）;
timerHandle = setTimeout（animate（+（d + step）+），tick）;
}


函数startAnimation（）{
eol = polyline.Distance（）;
map.setCenter（polyline.getPath（）。getAt（0））;
// map.addOverlay（new google.maps.Marker（polyline.getAt（0），G_START_ICON））;
// map.addOverlay（new GMarker（polyline.getVertex（polyline.getVertexCount（） - 1），G_END_ICON））;
// map.addOverlay（marker）;
poly2 = new google.maps.Polyline（{path：[polyline.getPath（）。getAt（0）]，strokeColor：＃0000FF，strokeWeight：10}）;
// map.addOverlay（poly2）;
setTimeout（animate（50），2000）; //允许时间显示初始地图

$ / code $ / pre

解决方案



我把var step = 50;到顶部 

  var map; 
 var directionDisplay; 
 var directionsService; 
 var stepDisplay; 
 var markerArray = []; 
 var position; 
 var marker = null; 
 var polyline = null; 
 var poly2 = null; 
 var speed = 0.0000005，wait = 1; 
 var infowindow = null; 
 var放大; 
 var zoomedd; 
 var zoomeddd; 
 
 var step = 50; // 5; //米
 
 var myPano; 
 var panoClient; 
 var nextPanoId; 
 var timerHandle = null;

我设定了step = 50;到calcRoute（）函数的结尾，现在动画工作正常

this is my example http://gidzior.net/map/v3_animate_marker_directions.html (i'm using placeholder in the input), core of GM code is from geocodezip.com, i develop the code with the great help of Andrew Leach

1500 meters in the animation before the destination is set to zoom could be seen to better reach this destination point, unfortunately, after zoom, animation is not smooth and therefore I set the "step" value to 15, how to reset this value after animation stops

i set step = 15 - if (d>eol-1500 && zoomed!=true) { map.setZoom(15); step = 15; zoomed=true; }

WHOLE SCRIPT

      var map;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];
  var position;
  var marker = null;
  var polyline = null;
  var poly2 = null;
  var speed = 0.0000005, wait = 1;
  var infowindow = null;
  var zoomed;
  var zoomedd;
  var zoomeddd;

  var myPano;   
  var panoClient;
  var nextPanoId;
  var timerHandle = null;

  var size = new google.maps.Size(26,25);
  var start_point = new google.maps.Point(0,0);
  var foothold = new google.maps.Point(13,15);

  var car_icon = new google.maps.MarkerImage("http://gidzior.net/map/car.png", size, start_point, foothold);

function createMarker(latlng, label, html) {
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: car_icon,
        clickable: false,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    return marker;
}


function initialize() {
  infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService();

    // Create a map and center it on Warszawa.
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    address = 'warszawa'
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
       map.setCenter(results[0].geometry.location);
    });

    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map,
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();

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



    var steps = []

    function calcRoute(){

if (timerHandle) { clearTimeout(timerHandle); }
if (marker) { marker.setMap(null);}
polyline.setMap(null);
poly2.setMap(null);
directionsDisplay.setMap(null);
    polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map,
      suppressMarkers:true
    }
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        var start = document.getElementById("start").value;
        var end = document.getElementById("end").value;
        var travelMode = google.maps.DirectionsTravelMode.DRIVING

        var request = {
            origin: start,
            destination: end,
            travelMode: travelMode,
            waypoints: [{
                location:new google.maps.LatLng(52.185570, 20.997255),
                stopover:false}],
            optimizeWaypoints: false
        };

        // Route the directions and pass the response to a
        // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK){
    directionsDisplay.setDirections(response);

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

        // For each route, display summary information.
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
        for (i=0;i<legs.length;i++) {
          if (i == 0) { 
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            // marker = google.maps.Marker({map:map,position: startLocation.latlng});
            marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
          }
          endLocation.latlng = legs[i].end_location;
          endLocation.address = legs[i].end_address;
          var steps = legs[i].steps;
          for (j=0;j<steps.length;j++) {
            var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);



            }
          }
        }

        polyline.setMap(map);
        document.getElementById("distance").innerHTML = (polyline.Distance()/1000).toFixed(2)+" km";
        map.fitBounds(bounds);
//        createMarker(endLocation.latlng,"end",endLocation.address,"red");
    map.setZoom(18);
    startAnimation();
    zoomed=false;
    zoomedd=false;
    zoomeddd=false;
    }                                                    
 });
}



      var step = 50; // 5; // metres
      var tick = 100; // milliseconds
      var eol;
      var k=0;
      var stepnum=0;
      var speed = "";
      var lastVertex = 1;


//=============== animation functions ======================
      function updatePoly(d) {
        // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
        if (poly2.getPath().getLength() > 20) {
          poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
          // map.addOverlay(poly2)
        }

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


      function animate(d) {
// alert("animate("+d+")");
        if (d>eol) {;
          map.panTo(endLocation.latlng);
          marker.setPosition(endLocation.latlng);
          return;
        }
        if (d>eol-20000 && zoomeddd!=true) {
          map.setZoom(12); // or whatever value
          zoomeddd=true;
        }
        if (d>eol-10000 && zoomedd!=true) {
          map.setZoom(13); // or whatever value
          zoomedd=true;
        }
        if (d>eol-1500 && zoomed!=true) {
          map.setZoom(15); // or whatever value
          step = 15;
          zoomed=true;
        }
        var p = polyline.GetPointAtDistance(d);
        map.panTo(p);
        marker.setPosition(p);
        updatePoly(d);
        timerHandle = setTimeout("animate("+(d+step)+")", tick);
      }


function startAnimation() {
        eol=polyline.Distance();
        map.setCenter(polyline.getPath().getAt(0));
        // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON));
        // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON));
        // map.addOverlay(marker);
        poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10});
        // map.addOverlay(poly2);
        setTimeout("animate(50)",2000);  // Allow time for the initial map display
}

解决方案

I managed to get to this, thanks anyway

i took var step = 50; to the the top

var map;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];
  var position;
  var marker = null;
  var polyline = null;
  var poly2 = null;
  var speed = 0.0000005, wait = 1;
  var infowindow = null;
  var zoomed;
  var zoomedd;
  var zoomeddd;

  var step = 50; // 5; // metres

  var myPano;   
  var panoClient;
  var nextPanoId;
  var timerHandle = null;

i set step = 50; to the end of calcRoute() function and now animation works fine

这篇关于如何重置谷歌地图v3动画步骤的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆