我想逐步或逐点使用 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:
}