使用您的 http 请求逐步自动路由有时间滞后

Autoroute step by step using Yours http request has a time lag

本文关键字：路由 滞后 时间 http 请求      更新时间：2023-09-26

我想逐步或逐点使用 gmap 和自动路由设置一个 html 页面。我想使用您的（OSM）http请求选项来做到这一点。

它工作正常，但是在http请求结束时，我必须设置一个警报框"alert（"OK？）;"才能获得正确的路由。如果我把它注释掉，如果我设置下一个点，则只会设置溃败。

我试了又试，...也许有人可以从业余脚本编写器中查看（提取的）代码（通常更多的 VBA/VBS 作为 JS）。

最好的问候莱因哈德

Ps：如果您复制并在本地测试，则代码示例有效。不要在此处使用"运行代码片段"，警报框会挂起。

<html>
<head>
<title>Google Maps API and Autoroutes</title>
<!--Source code -->
<!-- Style to put some height on the map -->
<style type="text/css">
    #map-canvas { height: 500px };
</style>
<!-- Load the Google Maps aPI -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- All of the script for multiple requests -->
<script type="text/javascript">
var map = null;
var info;
var marker;
function init() {
	// Some basic map setup (from the API docs)
	var mapOptions = {
		center: new google.maps.LatLng(51.5, 6.9),
		zoom: 13,
		mapTypeControl: false,
		streetViewControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	info = document.getElementById('info');
	geocoder = new google.maps.Geocoder();
}
//////////////////////routeCalc //////////////
var routeMarkers = [];
var setRM = 0;
function setRouteMarker() {
	if (setRM == 0) {
		temp = google.maps.event.addListener(map, 'click', function(event) {
					addMarker(event.latLng, true)});
		//directionsService = new google.maps.DirectionsService();
		map.setOptions({draggableCursor:'crosshair'});
		setRM = 1;
	} else {
		map.setOptions({draggableCursor: null});
		g.event.removeListener(temp);
		setRM = 0;
	}
}
var image = {
    url: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
  };
var mIndex = 0;
// OSM YOURS DIRECTION Service//
function addMarker(latlng) {
	marker = new google.maps.Marker({
		position: latlng,
		icon:  image,
		map: map,
		title: latlng.toUrlValue(6),
		draggable: true
	})
	marker.name = mIndex;
	mIndex++;
	routeMarkers.push(marker);
	//info.innerHTML = 'Test:' +mIndex +" / " + routeMarkers.length
	testUrl = 'http://www.yournavigation.org/api/1.0/gosmore.php?format=kml&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik'
	if (routeMarkers.length == 1) {httpGet(testUrl)}; //for testing
	if (routeMarkers.length > 1) {
		getRequest();
	}
}
function getRequest() {
	str = 'http://www.yournavigation.org/api/1.0/gosmore.php?format=kml&'
		+ 'flat={startLat}&flon={startLon}&tlat={endLat}&tlon={endLon}&v=bicycle&fast=1&layer=mapnik'
	start = routeMarkers[routeMarkers.length - 2].getPosition().toUrlValue(6);;
	end =   routeMarkers[routeMarkers.length - 1].getPosition().toUrlValue(6);
	s = start.split(",");
	e = end.split(",");
	startLat = s[0]; startLon = s[1];
	endLat = e[0]; endLon = e[1];
	//alert(endLon);
	str = str.replace("{startLat}", startLat);
	str = str.replace("{startLon}", startLon);
	str = str.replace("{endLat}", endLat);
	str = str.replace("{endLon}", endLon);
	//alert(str);
	//window.clipboardData.setData("Text", str);
	data = httpGet(str);
	//alert(data.length);
	if (data == "x") getRequest();
	//alert(data);
	coord = data.split("<coordinates>")
	coord =	coord[1].split("</coordinates>")
	coord = coord[0].trim();
	//alert(coord);
	//window.clipboardData.setData("Text", coord);
	var path = [];
	var clines = coord.split("'n");
	for (i=0; i<clines.length; i++) {
		 iArray = clines[i].split(",");
		lng = iArray[0];
		lat = iArray[1];
		point = new google.maps.LatLng(lat,lng);
		path.push(point)
	}
	var polyOptions = {
			map: map,
			path: path,
			strokeOpacity: 1.0,
			strokeWeight: 3,
			editable: false
		};
	poly = new google.maps.Polyline(polyOptions);
}
function httpGet(theUrl)
{
	ajax = new XMLHttpRequest();
	ajax.open("GET", theUrl, true);
	ajax.setRequestHeader("X-Test","test1");
	ajax.onreadystatechange = function(){
		if(this.readyState == 4){
			if(this.status == 200){
				result = this.responseText;
			}else{
				alert(this.statusText);
				result = "x";
			}
		}
	}
	ajax.send(null);
	//info.innerHTML = result;
	//alert("OK?");  //!! this is needed for correct routing. Why??
	return result;
}
// Get the ball rolling and trigger our init() on 'load'
google.maps.event.addDomListener(window, 'load', init);
</script>
 </head>
  <body>
<!-- Somewhere in the DOM for the map to be rendered -->
<div id="map-canvas"></div>
<TABLE style="width: 512px;">
  <TBODY><TR><TD>
      <INPUT onclick="setRouteMarker()" type="button" value="Route">
	</TD></TR></TBODY></TABLE>
<div id="info" >0 / 0</div>
</body>
</html>

我找到了解决方案。如果我将 HTTP 请求 fron 异步器更改为同步器，那么我可以通过正确单击来设置路由单击。如果您对代码感兴趣（自动路由/方向与多个，多个，..航点）将上面的 http 函数替换为附加的 http 函数。

如果有人可以通过一些错误检查（关于W3school的评论）来改进Http功能，那就没问题了。

最好的问候，莱因哈德

function httpGet(theUrl)
{
	var xhttp = new XMLHttpRequest();
	xhttp.open("GET", theUrl, false); //asyncron = true doesn't work correct.
	xhttp.send();
	result = xhttp.responseText;
	info.innerHTML = result;
	return result;
	//Notes from:http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
	//Using async=false is not recommended, but for a few small requests this can be ok.
	//Remember that the JavaScript will NOT continue to execute, until the server response is ready.
	//If the server is busy or slow, the application will hang or stop.
	//Note: When you use async=false, do NOT write an onreadystatechange function -
	// just put the code after the send() statement:
}

相关文章：