Как сдлеать такое C Yandex API Maps?

306

30 ноября 2018, 07:50

как можно реализовать такое с Yandex Картами?

Есть ссылка <a href="#" class="maps> Посмотреть точку на карте</a> И как сделать при наведение на неё, показало точку на карте(Точка заранее есть на карте)

У меня ниже карта находится, и надо чтобы скролилось до карты, и сфокусировалось на точку.

Answer 1

Есть вот такой модуль, посмотрите, может быть это как раз то что вам нужно https://tech.yandex.ru/maps/jsbox/2.1/geolink

Answer 2

Могу предложить следующий вариант решения вашей проблемы: добавить свои метки и объеденить с тем, что выше предложил @se0ga

ymaps.ready(function() { 
  var myMap = new ymaps.Map('map', { 
      center: [55.751574, 37.573856], 
      zoom: 9 
    }, { 
      searchControlProvider: 'yandex#search' 
    }), 
 
    // Создаём макет содержимого. 
    MyIconContentLayout = ymaps.templateLayoutFactory.createClass( 
      '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>' 
    ), 
 
    myPlacemark = new ymaps.Placemark(myMap.getCenter(), { 
      hintContent: 'Собственный значок метки', 
      balloonContent: 'Это красивая метка' 
    }, { 
      // Опции. 
      // Необходимо указать данный тип макета. 
      iconLayout: 'default#image', 
      // Своё изображение иконки метки. 
      iconImageHref: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/icon_customImage/images/myIcon.gif', 
      // Размеры метки. 
      iconImageSize: [30, 42], 
      // Смещение левого верхнего угла иконки относительно 
      // её "ножки" (точки привязки). 
      iconImageOffset: [-5, -38] 
    }), 
 
    myPlacemarkWithContent = new ymaps.Placemark([55.661574, 37.573856], { 
      hintContent: 'Собственный значок метки с контентом', 
      balloonContent: 'А эта — новогодняя', 
      iconContent: '12' 
    }, { 
      // Опции. 
      // Необходимо указать данный тип макета. 
      iconLayout: 'default#imageWithContent', 
      // Своё изображение иконки метки. 
      iconImageHref: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/icon_customImage/images/ball.png', 
      // Размеры метки. 
      iconImageSize: [48, 48], 
      // Смещение левого верхнего угла иконки относительно 
      // её "ножки" (точки привязки). 
      iconImageOffset: [-24, -24], 
      // Смещение слоя с содержимым относительно слоя с картинкой. 
      iconContentOffset: [15, 15], 
      // Макет содержимого. 
      iconContentLayout: MyIconContentLayout 
    }); 
 
  myMap.geoObjects 
    .add(myPlacemark) 
    .add(myPlacemarkWithContent); 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <title>Примеры. Задание собственного изображения для метки</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> 
  <script src="icon_customImage.js" type="text/javascript"></script> 
  <style> 
    html, 
    body, 
    #map { 
      width: 100%; 
      height: 100%; 
      padding: 0; 
      margin: 0; 
    } 
  </style> 
</head> 
 
<body> 
  <div id="map"></div> 
</body> 
 
</html>