Google maps api 3 如何在google maps v3动画中重置步骤的值
这是我的示例(我在输入中使用占位符),GM代码的核心来自geocodezip.com,我在Andrew Leach的帮助下开发了代码 1500米的动画在目标设置为缩放之前可以看到更好地到达这个目标点,不幸的是,缩放之后,动画不平滑,因此我将“步长”值设置为15,如何在动画停止后重置此值 如果(d>eol-1500&&zomed!=true){map.setZoom(15);step=15;zomed=true;},我设置step=15-Google maps api 3 如何在google maps v3动画中重置步骤的值,google-maps-api-3,Google Maps Api 3,这是我的示例(我在输入中使用占位符),GM代码的核心来自geocodezip.com,我在Andrew Leach的帮助下开发了代码 1500米的动画在目标设置为缩放之前可以看到更好地到达这个目标点,不幸的是,缩放之后,动画不平滑,因此我将“步长”值设置为15,如何在动画停止后重置此值 如果(d>eol-1500&&zomed!=true){map.setZoom(15);step=15;zomed=true;},我设置step=15- 整篇 var map; var direc
整篇
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
}
var映射;
方向显示;
var定向服务;
var步进显示;
var-markerary=[];
var位置;
var-marker=null;
var polyline=null;
var poly2=null;
var速度=0.0000005,等待=1;
var infowindow=null;
变焦;
变形虫;
var Zoomedd;
myPano变种;
客户机;
nextPanoId变种;
var timerHandle=null;
var size=新的google.maps.size(26,25);
var start_point=new google.maps.point(0,0);
var foothold=newgoogle.maps.Point(13,15);
var car_icon=new google.maps.MarkerImage(“http://gidzior.net/map/car.png“、规模、起点、立足点);
函数createMarker(板条、标签、html){
var contentString=''+label+'
'+html;
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
图标:汽车图标,
可点击:false,
zIndex:Math.round(latlng.lat()*-100000)eol-10000&&zoomedd!=true){
setZoom(13);//或任何值
zoomedd=真;
}
如果(d>eol-1500&&Zomed!=真){
map.setZoom(15);//或任何值
步骤=15;
缩放=真;
}
var p=多段线。GetPointAtDistance(d);
潘托地图(p);
标记器设置位置(p);
更新日期(d);
timerHandle=setTimeout(“动画”(+(d+步骤)+)”,勾选);
}
函数startAnimation(){
eol=多段线距离();
map.setCenter(polyline.getPath().getAt(0));
//addOverlay(新的google.maps.Marker(polyline.getAt(0),G_START_图标));
//addOverlay(新的GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_图标));
//添加覆盖图(标记);
poly2=new google.maps.Polyline({path:[Polyline.getPath().getAt(0)],strokeColor:#0000FF,strokeWeight:10});
//map.addOverlay(poly2);
setTimeout(“动画(50)”,2000);//为初始地图显示留出时间
}
无论如何,我还是设法做到了,谢谢
我将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 zoomed;
var zoomedd;
var zoomeddd;
var step = 50; // 5; // metres
var myPano;
var panoClient;
var nextPanoId;
var timerHandle = null;
我在calcRoute()函数的末尾设置了step=50;现在动画工作正常了无论如何,我还是设法做到了这一点,谢谢
我将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 zoomed;
var zoomedd;
var zoomeddd;
var step = 50; // 5; // metres
var myPano;
var panoClient;
var nextPanoId;
var timerHandle = null;
我将step=50;设置为calcRoute()函数的结尾,现在动画工作正常