{"id":335925,"date":"2022-07-20T09:00:11","date_gmt":"2022-07-20T09:00:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=335925"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=335925","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 \u0432 react-yandex-maps \u0447\u0435\u0440\u0435\u0437 iconLayout: template<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043a\u043e \u043c\u043d\u0435 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u041f\u0420\u041e\u0424\u0418 \u043f\u0440\u0438\u0448\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u043e\u0439 (\u0432 \u043f\u043b\u0430\u043d\u0435 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438) \u043a\u0430\u0440\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0437\u0430\u043a\u0430\u0437\u044b, \u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438. \u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u044f\u043d\u0434\u0435\u043a\u0441\u043e\u0432\u044b\u0439 SDK \u043f\u043e\u0434 \u0440\u0435\u0430\u043a\u0442.<\/p>\n

react-yandex-maps<\/a>\u00a0+\u00a0\u0434\u043e\u043a\u0438 \u043a \u043d\u0435\u043c\u0443<\/a><\/p>\n

UI \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u0434\u043e\u043a\u0430\u043c \u0443\u0436\u0435 \u042f\u043d\u0434\u0435\u043a\u0441\u0430<\/a>, \u0442\u043a react-yandex-maps<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u0430\u0440\u043a\u0435\u0440\u0430 \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0441\u044b. <\/p>\n

\u041f\u043e \u0434\u043e\u043a\u0430\u043c \u044f\u043d\u0434\u0435\u043a\u0441\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440 \u0441 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u043f\u0438\u043d\u0430, \u043d\u043e \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u043e\u0432\u0430\u0442\u043e.<\/p>\n

\u0427\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c<\/h2>\n

\u041d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u043f\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0447\u0451\u0440\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f-\u0431\u0430\u043b\u0443\u043d\u0430 \u0441\u0432\u0435\u0440\u0445\u0443. \u041f\u0440\u0438 \u0442\u043e\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u043d\u044b \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u0438\u043b\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043f\u0438\u043d\u0430 \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0443 \u043f\u0438\u043d\u043e\u0432 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n

\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0445\u043e\u0432\u0435\u0440\u044b<\/p>\n

<\/figcaption><\/figure>\n

\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 active-state<\/p>\n

<\/figcaption><\/figure>\n

\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043c\u0430\u0440\u043a\u0435\u0440\u0430)<\/p>\n

<\/figcaption><\/figure>\n

\u0421\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n

\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043f\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0435 iconLayout<\/code> \u043f\u0440\u043e\u043f\u0430 options<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Placemark<\/code><\/p>\n

<Placemark   geometry={[pin.coordinates.lat, pin.coordinates.lon]}   options={{    iconLayout: template,       }} \/><\/code><\/pre>\n
\u0412 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442\u044c template \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0434\u043e\u043a\u0430\u0445 \u042f\u043d\u0434\u0435\u043a\u0441\u0430<\/a><\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n
type Props = {     id: string;     onClick: (orderId: string) => void;   mapInstanceRef: YMapsApi | null; };  const OrdersPin: React.FC<Props> = React.memo(     ({id, mapInstanceRef, onClick}) => {         \/\/ \u0422\u0443\u0442 \u044f \u0434\u043e\u0441\u0442\u0430\u044e \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043c\u043e\u0435\u0433\u043e \u043f\u0438\u043d\u0430 \u0438\u0437 \u0440\u0435\u0434\u0430\u043a\u0441\u0430     const pin = useSelector(createMapPlacemarkByIdSelector(id)) as PinData;    if (!mapInstanceRef) return null;              \/\/ \u0422\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u044e template \u0434\u043b\u044f \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0432 iconLayout, \u043e createPinTemplateFactory \u0434\u0430\u043b\u044c\u0448\u0435     const template = createPinTemplateFactory(mapInstanceRef)({             onPinClick: onClick,             description: pin.description,             isActive: pin.isActive,             isViewed: pin.isViewed,         });             return (             <Placemark               \/\/ \u041f\u0440\u043e\u0431\u0440\u043e\u0441 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043f\u0438\u043d\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435       geometry={[pin.coordinates.lat, pin.coordinates.lon]}           options={{        \/\/ \u041f\u0440\u043e\u0431\u0440\u043e\u0441 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430   iconLayout: template,             }}       \/>     );   }, );<\/code><\/pre>\n
\u041e \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430\u0445<\/h2>\n
\u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e — \u0441\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430\u043c\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
 const layout = ymaps.templateLayoutFactory.createClass(   '<\u0422\u0443\u0442 \u0432\u0451\u0440\u0441\u0442\u043a\u0430>',    {     build:      function() {      layout.superclass.build.call(this);       <\u0422\u0443\u0442 JS>     }   } );<\/code><\/pre>\n
\u042d\u0442\u043e\u0442 layout<\/code> \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0432 iconLayout<\/code><\/p>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043f\u0440\u0438\u0432\u0451\u043b \u0432\u044b\u0448\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0432 \u0441\u0432\u043e\u0451\u043c \u043a\u043e\u0434\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e createPinTemplateFactory<\/code> \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441 mapInstanceRef<\/code>, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043f\u0438\u043d\u0430 (onClick, isActive \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435). <\/p>\n
\u0412 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0444\u0430\u0431\u0440\u0438\u043a\u0438, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c layout<\/code> \u0447\u0435\u0440\u0435\u0437 ymaps.templateLayoutFactory.createClass<\/code> \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0432 iconLayout<\/code><\/p>\n
\u041f\u0440\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 createClass<\/h2>\n
\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<\/strong> \u0442\u0443\u0442 — \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439. \u0414\u0430, \u0432\u044b \u043d\u0435 \u043e\u0441\u043b\u044b\u0448\u0430\u043b\u0438\u0441\u044c, \u043a\u0438\u0434\u0430\u0435\u043c \u0441\u044e\u0434\u0430 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 HTML. \u0422\u0443\u0442 \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u0449\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0437\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 className<\/p>\n
\u0411\u043b\u0430\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0440\u043e\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0418\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a> <\/em>(\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0432\u0438\u0434\u0430 `\u041f\u0440\u0438\u0432\u0435\u0442, \u044f ${name}`)<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043a\u0430\u043a \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443 \u043c\u0435\u043d\u044f:<\/p>\n
`<div class=\"pin-container\">       <div class=\"placemark-description\">             <p class=\"placemark-description__title\">     ${description.title}<\/p>              <p class=\"placemark-description__subtitle\">                   ${description.subtitle.prefix}                     <span class=\"placemark-description__price\">       ${description.subtitle.body}       <\/span>                     ${description.subtitle.postfix}               <\/p>         <\/div>         <div class=\"pin-container__pin\">               <div class=\"placemark__background\"><\/div>         <\/div> <\/div>`<\/code><\/pre>\n
\u0422\u0443\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043d\u0451\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 «\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f» \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c\u043e\u0433\u043e «\u043f\u0438\u043d\u0430» (\u0434\u043b\u044f \u0444\u043e\u043d\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0432, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b, \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u043f\u0438\u043d\u0430 \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443, \u0435\u0433\u043e \u0446\u0435\u043d\u0442\u0440 \u043d\u0435 \u0441\u0434\u0432\u0438\u0433\u0430\u043b\u0441\u044f)<\/p>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<\/strong> — JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u0443\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u043f\u0441\u044b \u0438 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u044f listener’\u044b \u044d\u0432\u0435\u043d\u0442\u043e\u0432 geoObject<\/code><\/p>\n
\u0423 \u0441\u0435\u0431\u044f \u044f \u043f\u043e\u0434\u0435\u043b\u0438\u043b \u043a\u043e\u0434 \u0442\u0443\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n
\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/strong> \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0438\u043c\u0438<\/p>\n
\/\/ GET ELEMENTS const pinContainer = this.getParentElement().getElementsByClassName( 'pin-container', )[0];  const backgroundElement = this.getParentElement().getElementsByClassName( 'placemark__background', )[0];  ...<\/code><\/pre>\n
\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0445\u043e\u0432\u0435\u0440\u0430<\/strong> \u0447\u0435\u0440\u0435\u0437 mouseenter<\/code> \u0438 mouseleave<\/code><\/p>\n
\u0422\u0443\u0442 \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0438\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439  backgroundElement<\/code> \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0438\u043d\u0430. \u041d\u0430 mouseleave<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0431\u0440\u043e\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/p>\n
(\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435, \u0442\u0443\u0442 \u0442\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438)<\/p>\n
\/\/ HOVER LAYOUT           this.getData().geoObject.events.add(             'mouseenter',             () => {               backgroundElement.style.top = `-${PIN_EXPANDED_INSET}px`;               backgroundElement.style.bottom = `-${PIN_EXPANDED_INSET}px`;               backgroundElement.style.left = `-${PIN_EXPANDED_INSET}px`;               backgroundElement.style.right = `-${PIN_EXPANDED_INSET}px`;                descriptionElement.style.transform = `translateY(-${PIN_EXPANDED_INSET}px)`;               if (isDescriptionHidden) {                 descriptionElement.style.opacity = 1;               }             },             this,           );            this.getData().geoObject.events.add(             'mouseleave',             () => {               \/\/ if placemark is active leave hover layout unaffected               if (!isActive) {                 backgroundElement.style.top = '0px';                 backgroundElement.style.bottom = '0px';                 backgroundElement.style.left = '0px';                 backgroundElement.style.right = '0px';                  descriptionElement.style.transform = 'translateY(0px)';                 if (isDescriptionHidden) {                   descriptionElement.style.opacity = 0;                 }               }             },             this,           );<\/code><\/pre>\n
\u0412\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u043e\u043d\u044b<\/strong> \u043c\u0430\u0440\u043a\u0435\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 shape<\/code><\/p>\n
\u0422\u0443\u0442 \u044f \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u043e\u043d\u043e\u0439 \u043c\u0430\u0440\u043a\u0435\u0440\u0430.  <\/p>\n
\/\/ TOUCHABLE ZONE SHAPE if (isDescriptionHidden) {   \/\/ \u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0443 \u043f\u0438\u043d\u0430 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043a\u0440\u0443\u0433 \u0438 \u044f    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u043e\u043d\u044b \u0444\u043e\u0440\u043c\u0443 \u043a\u0440\u0443\u0433\u0430.             this.getData().options.set(               'shape',               getMapMarkerShape(pinSize, pinSize, 'Circle'),             );           } else {             \/\/ \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430             this.getData().options.set('shape', {               type: MarkerShape.RECTANGLE,               coordinates: [                 [-translateLeft, -translateTop],                 [                   descriptionElement.offsetWidth - translateLeft,                   elementHeight - translateTop,                 ],               ],             });           }<\/code><\/pre>\n
\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 onClick<\/strong><\/p>\n
this.getData().geoObject.events.add('click', onPinClick, this);<\/code><\/pre>\n
\u041d\u0435 \u0431\u0443\u0434\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0443\u0442 \u0432\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434, \u0442\u043a \u0435\u0433\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u0438 \u043e\u043d \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0434\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0435\u043d. <\/p>\n
\u041e\u0431\u0449\u0430\u044f \u0441\u0443\u0442\u044c:<\/strong> <\/p>\n