我想在谷歌地图上渲染多条路线,例如,如果我点击一个路线的 A 点标记,它会渲染这条路线,如果我点击另一个标记,它会绘制另一条路线,我试过这样做,但它会在我的数据库上加载相同的路由,我有多个 ID,我想用它来定义我将呈现的路由。
所以,我会把我的例子和我的代码发布给你理解。
这是我的加载项目脚本:
var map, ren, ser;
var data = {};
var data2 = {};
var directionsDisplay;
var directionResult = [];
var rotaArray = [];
var directionsService = new google.maps.DirectionsService();
var infowindow;
function goma()
{
map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(-23.611654, -46.700329)});
var infoWindow = new google.maps.InfoWindow;
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
downloadUrl("rotasXML.php", function(data) {
var rotasXML = data.responseXML;
var rotas = rotasXML.documentElement.getElementsByTagName("rota");
for (var i = 0; i < rotas.length; i++ )
{
var id = rotas[i].getAttribute("id");
var latA = parseFloat(rotas[i].getAttribute("latA"));
var lngA = parseFloat(rotas[i].getAttribute("lngA"));
var latB = parseFloat(rotas[i].getAttribute("latB"));
var lngB = parseFloat(rotas[i].getAttribute("lngB"));
var rotaB = new google.maps.LatLng(
parseFloat(rotas[i].getAttribute("latB")),
parseFloat(rotas[i].getAttribute("lngB")));
var rotaA = new google.maps.LatLng(latA,lngA);
var html = "<b> Marker " + id + "</b> <br/>",
html = html + "FROM "+latA+" : "+lngA;
html = html + "<br/>To "+latB +" : "+lngB;
var parameter = id+","+latA+","+lngA+","+latB+","+lngB;
html = html + "<br/><button onclick='doIt("+id+ latA+ latB+ lngA+ lngB+")'>Load Route</button>";
var wayA = new google.maps.Marker({
map: map,
position: rotaA
});
rotaArray.push(wayA);
bindInfoWindow(wayA, map, infoWindow, html);
}
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url2, callback) {
var jax = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
jax.onreadystatechange = function()
{
if (jax.readyState == 4) {
jax.onreadystatechange = doNothing;
callback(jax, jax.sts);
}
};
jax.open('GET', url2, true);
jax.send(null);
}
function doIt(id,latA, latB, lngA, lngB){
alert(id);
ser.route({
'origin':new google.maps.LatLng(latA, lngA),
'destination':new google.maps.LatLng(latB, lngB),
'travelMode': google.maps.DirectionsTravelMode.DRIVING},
function(response){
ren.setDirections(response);
});
}
function setAllMap(map) {
for (var i = 0; i < rotaArray.length; i++) {
rotaArray[i].setMap(map);
}
}
function clearOverlays() {
setAllMap(null);
}
function deleteOverlays() {
clearOverlays();
rotaArray = [];
}
}
我想点击航点并渲染正确的路线