Google maps 如何向地图添加多个(用加号分隔)航路点

Google maps 如何向地图添加多个(用加号分隔)航路点,google-maps,google-maps-api-3,google-maps-markers,Google Maps,Google Maps Api 3,Google Maps Markers,多亏了,我成功地创建了一个带有方向功能和XML标记的地图。不过,还有一个问题: 如何向其添加航路点?它们应该用加号或其他合适的符号分开 以下是当前代码: <script type="text/javascript"> //<![CDATA[ // global "map" variable var map = null; var rendererOptions = { draggable: true }; var directionsDisplay = new google

多亏了,我成功地创建了一个带有方向功能和XML标记的地图。不过,还有一个问题:

如何向其添加航路点?它们应该用加号或其他合适的符号分开

以下是当前代码:

<script type="text/javascript"> 
//<![CDATA[
 // global "map" variable
var map = null;
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
var contentString = html;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);
});
}
// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var request = {};
if (document.getElementById("walk").checked) {
request.travelMode = google.maps.DirectionsTravelMode.WALKING;
} else {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
}
if (document.getElementById("highways").checked) {
request.avoidHighways = true;
}   
if (document.getElementById("alternatives").checked) {
request.provideRouteAlternatives = true;
}   
// ==== set the start and end locations ====
var saddr = document.getElementById("saddr").value
var daddr = document.getElementById("daddr").value
request.origin = saddr;
request.destination = daddr;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml   
if (document.getElementById("showmarkers").checked) {
downloadUrl("example.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
// Read the data from example2.xml   
if (document.getElementById("showmarkers2").checked) {
downloadUrl("example2.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
}
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});  
//]]>
</script>

//
这是我用来生成航路点的代码,但现在不起作用:

var via = document.getElementById("via").value;
  if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:true})
          }
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints:[{location:via, stopover:true}],
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:saddr, 
        destination:daddr,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }
var via=document.getElementById(“via”).value;
如果(通过){
so=通过.拆分(“+”)
如果(so.length>1){
var wpArray=[];
对于(i=0;(i 1){
var wpArray=[];

对于(i=0;(i不确定为什么有2个xml文件或它们的格式。下面是一个基于类别显示/隐藏标记的示例(同样翻译自Mike Williams的v2教程):


(问题部分也复制到)

不确定为什么有2个xml文件或它们的格式。下面是一个基于类别显示/隐藏标记的示例(同样翻译自Mike Williams的v2教程):


(请将问题的适用部分抄送至)

1.您尝试过添加航路点吗?2.您所说的“用加号或适当的符号分隔”是什么意思?何处?3.您应该一次只问一个问题。@geocodezip 1.在我使用问题编辑中添加的代码之前。但是,新代码现在不起作用。2.在“航路点”文本框中输入的文本看起来像这样的“巴黎+阿姆斯特丹”,这意味着它应该计算通过这两个城市的路线(有时不止两个)。3.我为标记人提出了一个新问题:)请发布更完整的代码和具体的错误消息。“不工作”没有足够的详细信息。@geocodezip没有错误消息。它根本不起作用,当我单击“提交”按钮时,没有发生任何事情,无论是“从”还是“到”位置,也没有中途停留。我将尝试进行更多的试验,然后发布整个代码。您需要包含足够的信息,以便我们能够重现问题,示例xml数据以及您正在测试的样本航路点。1.您尝试过添加航路点吗?2.您所说的“用加号或适当的符号分隔”是什么意思?何处?3.您应该一次只问一个问题。@geocodezip 1.在我使用问题编辑中添加的代码之前。但是,新代码现在不起作用。2.在“航路点”文本框中输入的文本看起来像这样的“巴黎+阿姆斯特丹”,这意味着它应该计算通过这两个城市的路线(有时不止两个)。3.我为标记人提出了一个新问题:)请发布更完整的代码和具体的错误消息。“不工作”没有足够的详细信息。@geocodezip没有错误消息。它根本不起作用,当我单击“提交”按钮时,没有发生任何事情,无论是“从”还是“到”位置,也没有中途停留。我将尝试进行更多的试验,然后发布整个代码。您需要包含足够的信息,以便我们能够重现问题,示例xml数据以及您正在测试的示例航路点。问题的第二部分现在在这里:由于地图中使用的项目差异很大,我无法通过编程在一个xml文件中创建所有项目。如果有数百个项目经常更改,我将不得不手动插入每个项目,这是一个大问题。seco问题的第二部分在这里:由于地图中使用的项目差异很大,我无法通过编程在一个xml文件中创建所有项目。如果有数百个项目经常更改,我将不得不手动插入每个项目,这是一个大问题。
function getDirections() {
        // ==== Set up the walk and avoid highways options ====
        var request = {};
        if (document.getElementById("walk").checked) {
           request.travelMode = google.maps.DirectionsTravelMode.WALKING;
        } else {
          request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
        }

        if (document.getElementById("highways").checked) {
           request.avoidHighways = true;
        }

        if (document.getElementById("alternatives").checked) {
           request.provideRouteAlternatives = true;
        }


        // ==== set the start and end locations ====
        var start = document.getElementById("start").value
        var end = document.getElementById("end").value

        request.origin = start;
        request.destination = end;
        request.waypoints = via;

var so;
var via = document.getElementById("via").value;



if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:false})
          }
          request = {
            origin:start, 
            destination:end,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:start, 
            destination:end,
            waypoints:[{location:via, stopover:false}],
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:start, 
        destination:end,
        provideRouteAlternatives: true,
        avoidHighways: document.getElementById("highways").checked,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }