Как добавить несколько (разделенных знаком плюс) путевых точек на карту

Благодаря geocodezip, мне удалось создать карту с загрузкой маршрутов и 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
      }
  }

РЕДАКТИРОВАТЬ Это рабочая функция:

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);
      }
    });
  }

person take2    schedule 09.10.2012    source источник
comment
1. что вы пробовали для добавления путевых точек? 2. Что вы имеете в виду быть разделены знаком плюс или чем-то соответствующим? Где? 3. Вы действительно должны задавать только один вопрос за раз.   -  person geocodezip    schedule 09.10.2012
comment
@geocodezip 1. Прежде чем я использовал код, добавленный в редактирование вопроса. Однако теперь он не работает с новым кодом. 2. Текст, введенный в текстовое поле путевых точек, будет выглядеть как e. грамм. как этот Париж + Амстердам, что означает, что он должен рассчитывать маршрут через оба города (иногда более двух). 3. Я открыл новый вопрос для маркеров :) -page" title="как показать маркеры скрытия из XML-файла без обновления страницы"> stackoverflow.com/questions/12802617/   -  person take2    schedule 09.10.2012
comment
Пожалуйста, опубликуйте более полный код и конкретные сообщения об ошибках. не работает не хватает детализации.   -  person geocodezip    schedule 09.10.2012
comment
@geocodezip Сообщений об ошибках нет. Это просто не работает, ничего не происходит, когда я нажимаю кнопку отправки, ни с местами отправления, ни с остановками в пути. Я попробую еще немного поэкспериментировать, а затем опубликую весь код.   -  person take2    schedule 09.10.2012
comment
Вам нужно будет включить достаточно информации, чтобы мы могли воспроизвести проблему, образец данных XML, а также образец путевой точки, с которой вы тестируете.   -  person geocodezip    schedule 09.10.2012
comment
@geocodezip Теперь мне удалось заставить это работать. Честно говоря, я не уверен, что заставило его работать правильно, это может быть строка request.waypoints = via;, потому что раньше я не добавлял request..   -  person take2    schedule 09.10.2012


Ответы (1)


Не уверен, почему у вас есть 2 файла xml или какой у них формат. Вот пример, который показывает/скрывает маркеры на основе их категорий (опять же перевод из учебника Майка Уильямса v2):

http://www.geocodezip.com/v3_MW_example_categories.html

(также скопировано в How to show/ скрыть маркеры из файла XML без обновления страницы с той частью вопроса, к которой они относятся)

person geocodezip    schedule 09.10.2012
comment
Вторая часть вопроса теперь здесь: stackoverflow.com/questions/12802617/ - person take2; 09.10.2012
comment
Я не могу программно создать все элементы только в одном XML-файле из-за больших различий в элементах, используемых для карты. Мне пришлось бы вручную вставлять каждый элемент, что является большой проблемой, если у вас есть сотни элементов, которые часто меняются. - person take2; 09.10.2012