SanSYS

http://www.sansys.net/2015/04/yandex-maps-search-javascript.

Apr 10th, 2015
3,313
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function showOnMap() {
  2.     showAddress(document.getElementById('addr').value, 'map');
  3. }
  4.  
  5. /*
  6.  * Call example: showAddress("г. Москва, ул. Петровка, д. 25", 'map');
  7.  */
  8. function showAddress(address, mapId) {
  9.     var showMap = function () {
  10.         // ищем координаты по адресу, дополнительно
  11.         // см. https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/geocoding-docpage/
  12.         var myGeocoder = ymaps.geocode(address);
  13.  
  14.         // по результату поиска действуем.
  15.         // см. http://wiki.commonjs.org/wiki/Promises/A
  16.         // см. https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/vow.Promise-docpage/
  17.         myGeocoder.then(
  18.             function (res) {
  19.                 // массив вида [55.766962, 37.614276]
  20.                 var coords = res.geoObjects.get(0).geometry.getCoordinates();
  21.  
  22.                 // здесь пытаемся использовать ранее созданную карту
  23.                 // см. javascript memoization
  24.                 var map = showAddress.map || (showAddress.map = new ymaps.Map(mapId, {
  25.                     center: coords,
  26.                     zoom: 16
  27.                 }));
  28.                
  29.                 // центрируем искомый объект на карте
  30.                 // см. https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/reference/Map-docpage/#setCenter
  31.                 map.setCenter(coords);
  32.                
  33.                 // удаляем ранее раставленные маркеры
  34.                 map.geoObjects.removeAll();
  35.  
  36.                 // добавляем маркер
  37.                 map.geoObjects.add(
  38.                     // см. https://tech.yandex.ru/maps/doc/jsapi/1.x/ref/reference/placemark-docpage/
  39.                     new ymaps.Placemark(coords,
  40.                         {
  41.                             // установка текста маркера
  42.                             iconContent: address
  43.                         },
  44.                         {
  45.                             // установка стиля маркера
  46.                             // см. https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/
  47.                             preset: 'islands#greenStretchyIcon'
  48.                         }
  49.                     )
  50.                 );
  51.             },
  52.             function (err) {
  53.                 alert('Ошибка поиска, попробуйте позднее');
  54.             }
  55.         );
  56.     };
  57.  
  58.     // если карт на странице нет, то добавляем yandex maps API
  59.     if (!window.ymaps) {
  60.         var s = document.createElement('script');
  61.  
  62.         // см. https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement        
  63.         s.onload = function () {
  64.             ymaps.ready(showMap); // по готовности API начинаем действовать
  65.         };
  66.  
  67.         s.src = 'http://api-maps.yandex.ru/2.1/?lang=ru_RU';
  68.         document.head.appendChild(s);
  69.     } else {
  70.         showMap(); // API уже готово, можно пользоваться
  71.     }
  72. }
Advertisement
Add Comment
Please, Sign In to add comment