The site has Yandex.Maps with the route created through the API. It is necessary to print it.

What is the best way to do? I myself think of doing, having received a picture through the static Yandex.Maps API, but I just can’t get the vertices of the broken line from the map.

The code is very dirty, but working:

<a id="map-img" class="btn btn-success">На ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ</a> <script> window.onload = function() { $('#map-img').on('click', function(e) { e.preventDefault(); // var win = window.open(); // win.document.write("<img src='"+$(this).attr('href')+"'>"); // console.log("<img src='"+$(this).attr('href')+"'>"); window.print(); }); }; </script> <div id="map" style="width: 1000px; height: 1000px"></div> <script src="https://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU&coordorder=longlat" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); var myMap; var cleaner_addr = "<?php echo('Москва, Нагатинская ΡƒΠ»., 1c23');?>"; var client_addr = "<?php echo('Москва, ΡƒΠ». Π›ΡŒΠ²Π° Волстого, 16');?>"; function init() { cleaner_geocode = ymaps.geocode(cleaner_addr, { "json": true }); cleaner_geocode.then( function(res) { var cleaner_coords = res.GeoObjectCollection.metaDataProperty.GeocoderResponseMetaData.Point.coordinates; console.log(cleaner_coords); myMap = new ymaps.Map("map", { center: cleaner_coords, zoom: 12 }); myMap.controls.add( new ymaps.control.ZoomControl() ); var cleanerPM = new ymaps.Placemark(cleaner_coords, { hintContent: '1', balloonContent: 'Π‘Ρ‚ΠΎΠ»ΠΈΡ†Π° России' }); myMap.geoObjects.add(cleanerPM); var metro_geocode = ymaps.geocode(cleaner_coords, { "json": true, "kind": "metro", "multiRoute": true, "routingMode": "masstransit" }); metro_geocode.then( function(res) { metro_coords = res.GeoObjectCollection.metaDataProperty.GeocoderResponseMetaData.Point.coordinates; console.log(cleaner_coords); var client_geocode = ymaps.geocode(client_addr, { "json": true }); client_geocode.then( function(res) { client_coords = res.GeoObjectCollection.metaDataProperty.GeocoderResponseMetaData.Point.coordinates; ymaps.route([ cleaner_coords, metro_coords, client_coords ]).then( function(route) { myMap.geoObjects.add(route); console.log(route.getPaths().geometry); var coords = cleaner_coords.join(',') + ',' + metro_coords.join(',') + ',' + client_coords.join(','); $('#map-img').attr('href', 'https://static-maps.yandex.ru/1.x/?l=map&pl=' + coords); }, function(error) { alert("Π’ΠΎΠ·Π½ΠΈΠΊΠ»Π° ошибка: " + error.message); } ); }, function(err) { // ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ошибки } ); }, function(err) { // ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ошибки } ); }, function(err) { // ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ошибки } ); } </script>

  • How do you get the route? In theory, there should be no problems with tops. - tutankhamun
  • using ymaps.route, but I didn't understand how to get the coordinates - dergus
  • Completed the answer. Try not to do such constructions do().then(function() { do().then(); } or build a chain of promises or execute queries in parallel (in this case it is justified) - tutankhamun
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

  1. Open the map in a new page;
  2. Wait for the map to load;
  3. Call window.print() ;

Updated

You can get the coordinates of the route like this:

 ymaps.route(coords).then(function(route) { route.getPaths().each(function(path) { console.log(path.geometry.getCoordinates()); }); });

Ps. The static API is extremely limited in functionality.

  • Thanks, I will try this way, the labels are not displayed, but at least with the route everything is ok. - dergus
  • @dergus Why aren't the labels displayed? Complete your question with at least a snippet of code - tutankhamun
  • Well, the code is very bad, because for the time being, the test is not the final version and wrote quickly, but I'll add ok - dergus