Question

我想设置一个带有gmap的html页面，并逐步或逐点自动运行。我想使用YOURS（OSM）http请求选项来做到这一点。

它工作正常，但在http请求结束时，我必须设置一个警告框“alert（”OK？）;“以获得正确的路由。如果我将其注释掉，则只会设置路由，如果我设定下一点。

我尝试过并试过......也许有人可以从爱好脚本编写器（通常更多的vba / vbs作为js）查看（提取的）代码。

最好的问候Reinhard

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>

Answer 1

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

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

最好的问候，Reinhard

＆＃13;

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:
}

＆＃13;

使用您的http请求逐步自动执行时间滞后

1 个答案: