Guest User

Untitled

a guest
Feb 20th, 2018
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.79 KB | None | 0 0
  1. routeActiveStrokeWidth: [20, 3]
  2. routeActiveStrokeColor: ["#ff0000","#00ff00"]
  3.  
  4. function init() {
  5. // Объявляем набор опорных точек и массив индексов транзитных точек.
  6. var referencePoints = [
  7. "Москва, Ленинский проспект",
  8. "Москва, Льва Толстого, 16",
  9. "Москва, Кремлевская набережная",
  10. "Москва, парк Сокольники"
  11. ],
  12. viaIndexes = [2];
  13.  
  14. // Создаем мультимаршрут и настраиваем его внешний вид с помощью опций.
  15. var multiRoute = new ymaps.multiRouter.MultiRoute({
  16. referencePoints: referencePoints,
  17. params: {viaIndexes: viaIndexes}
  18. }, {
  19. // Внешний вид путевых точек.
  20. wayPointStartIconColor: "#333",
  21. wayPointStartIconFillColor: "#B3B3B3",
  22. // Задаем собственную картинку для последней путевой точки.
  23. wayPointFinishIconLayout: "default#image",
  24. wayPointFinishIconImageHref: "https://sandbox.api.maps.yandex.net/examples/ru/2.1/multiroute_view_options/images/sokolniki.png",
  25. wayPointFinishIconImageSize: [30, 30],
  26. wayPointFinishIconImageOffset: [-15, -15],
  27. // Позволяет скрыть иконки путевых точек маршрута.
  28. // wayPointVisible:false,
  29.  
  30. // Внешний вид транзитных точек.
  31. viaPointIconRadius: 7,
  32. viaPointIconFillColor: "#000088",
  33. viaPointActiveIconFillColor: "#E63E92",
  34. // Транзитные точки можно перетаскивать, при этом
  35. // маршрут будет перестраиваться.
  36. viaPointDraggable: true,
  37. // Позволяет скрыть иконки транзитных точек маршрута.
  38. // viaPointVisible:false,
  39.  
  40. // Внешний вид точечных маркеров под путевыми точками.
  41. pinIconFillColor: "#000088",
  42. pinActiveIconFillColor: "#B3B3B3",
  43. // Позволяет скрыть точечные маркеры путевых точек.
  44. // pinVisible:false,
  45.  
  46. // Внешний вид линии маршрута.
  47. routeActiveStrokeWidth: [20, 3],
  48. routeActiveStrokeColor: ["#ff0000","#00ff00"],
  49.  
  50. // Внешний вид линии пешеходного маршрута.
  51. routeActivePedestrianSegmentStrokeStyle: "solid",
  52. routeActivePedestrianSegmentStrokeColor: "#00CDCD",
  53.  
  54. // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
  55. boundsAutoApply: true
  56. });
  57.  
  58. // Настраиваем внешний вид второй точки через прямой доступ к ней.
  59. customizeSecondPoint();
  60.  
  61. // Создаем кнопки.
  62. var removePointsButton = new ymaps.control.Button({
  63. data: {content: "Удалить промежуточные точки"},
  64. options: {selectOnClick: true}
  65. }),
  66. routingModeButton = new ymaps.control.Button({
  67. data: {content: "Пешком"},
  68. options: {selectOnClick: true}
  69. });
  70.  
  71. // Объявляем обработчики для кнопок.
  72. removePointsButton.events.add('select', function () {
  73. multiRoute.model.setReferencePoints([
  74. referencePoints[0],
  75. referencePoints[referencePoints.length - 1]
  76. ], []);
  77. });
  78.  
  79. removePointsButton.events.add('deselect', function () {
  80. multiRoute.model.setReferencePoints(referencePoints, viaIndexes);
  81. // Т.к. вторая точка была удалена, нужно заново ее настроить.
  82. customizeSecondPoint();
  83. });
  84.  
  85. routingModeButton.events.add('select', function () {
  86. multiRoute.model.setParams({routingMode: 'pedestrian'}, true);
  87. });
  88.  
  89. routingModeButton.events.add('deselect', function () {
  90. multiRoute.model.setParams({routingMode: 'auto'}, true);
  91. });
  92.  
  93. // Функция настройки внешнего вида второй точки.
  94. function customizeSecondPoint() {
  95. /**
  96. * Ждем, пока будут загружены данные мультимаршрута и созданы отображения путевых точек.
  97. * @see https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel-docpage/#event-requestsuccess
  98. */
  99. multiRoute.model.events.once("requestsuccess", function () {
  100. var yandexWayPoint = multiRoute.getWayPoints().get(1);
  101. // Создаем балун у метки второй точки.
  102. ymaps.geoObject.addon.balloon.get(yandexWayPoint);
  103. yandexWayPoint.options.set({
  104. preset: "islands#grayStretchyIcon",
  105. iconContentLayout: ymaps.templateLayoutFactory.createClass(
  106. '<span style="color: red;">Я</span>ндекс'
  107. ),
  108. balloonContentLayout: ymaps.templateLayoutFactory.createClass(
  109. '{{ properties.address|raw }}'
  110. )
  111. });
  112. });
  113. }
  114.  
  115. // Создаем карту с добавленной на нее кнопкой.
  116. var myMap = new ymaps.Map('map', {
  117. center: [55.739625, 37.54120],
  118. zoom: 7,
  119. controls: [removePointsButton, routingModeButton]
  120. }, {
  121. buttonMaxWidth: 300
  122. });
  123.  
  124. // Добавляем мультимаршрут на карту.
  125. myMap.geoObjects.add(multiRoute);
  126. }
  127.  
  128. ymaps.ready(init);
Add Comment
Please, Sign In to add comment