https://vue-yandex-maps.github.io/new-docs/assets/index.html.13a7088b.js

1import{_ as i,o as l,c as r,b as n,a,w as e,d as s,e as d,r as t}from"./app.5957a2d0.js";const u={},k=n("h1",{id:"\u0432\u0432\u0435\u0434\u0435\u043D\u0438\u0435",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#\u0432\u0432\u0435\u0434\u0435\u043D\u0438\u0435","aria-hidden":"true"},"#"),s(" \u0412\u0432\u0435\u0434\u0435\u043D\u0438\u0435")],-1),m={class:"custom-container tip"},v=n("p",{class:"custom-container-title"},"\u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043D\u0438\u043C\u0430\u043D\u0438\u0435",-1),h=s("\u042D\u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044F \u043F\u0430\u043A\u0435\u0442\u0430 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0439. \u0410\u043A\u0442\u0443\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F "),g={href:"https://github.com/yandex-maps-unofficial/vue-yandex-maps",target:"_blank",rel:"noopener noreferrer"},b=s("\u0437\u0434\u0435\u0441\u044C"),_=n("p",null,"\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u0435\u0442 \u0431\u0435\u0437 \u0443\u0441\u0438\u043B\u0438\u0439 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u042F.\u041A\u0430\u0440\u0442\u044B \u0432 \u043F\u0440\u043E\u0435\u043A\u0442.",-1),x=n("h2",{id:"\u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#\u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430","aria-hidden":"true"},"#"),s(" \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430")],-1),y=n("p",null,"\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u0432\u0430\u0448 \u043F\u0430\u043A\u0435\u0442\u043D\u044B\u0439 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440",-1),f=n("div",{class:"language-bash ext-sh"},[n("pre",{class:"language-bash"},[n("code",null,[n("span",{class:"token function"},"yarn"),s(),n("span",{class:"token function"},"add"),s(` vue-yandex-maps@beta
2`)])])],-1),w=n("div",{class:"language-bash ext-sh"},[n("pre",{class:"language-bash"},[n("code",null,[n("span",{class:"token function"},"npm"),s(),n("span",{class:"token function"},"install"),s(` vue-yandex-maps@beta
3`)])])],-1),j=s("\u041F\u043E\u0441\u043B\u0435 \u044D\u0442\u043E\u0433\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C "),N={href:"https://yandex.ru/dev/maps/jsapi/doc/2.1/dg/concepts/load.html#load__param",target:"_blank",rel:"noopener noreferrer"},Y=s("\u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430"),M=s(". \u042D\u0442\u0438 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u044F\u0432\u043B\u044F\u044E\u0442\u0441\u044F \u043E\u043F\u0446\u0438\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u043C\u0438, \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0443\u043A\u0430\u0437\u0430\u043D\u044B \u043D\u0438\u0436\u0435."),q=d(`<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token punctuation">{</span>
4  <span class="token literal-property property">apiKey</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u0418\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u043A\u043B\u044E\u0447 API</span>
5  <span class="token literal-property property">lang</span><span class="token operator">:</span> <span class="token string">&#39;ru_RU&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0439 \u044F\u0437\u044B\u043A</span>
6  <span class="token literal-property property">

6coordorder</span><span class="token operator">:</span> <span class="token string">&#39;latlong&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u041F\u043E\u0440\u044F\u0434\u043E\u043A \u0437\u0430\u0434\u0430\u043D\u0438\u044F \u0433\u0435\u043E\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043A\u043E\u043E\u0440\u0434\u0438\u043D\u0430\u0442</span>
7  <span class="token literal-property property">debug</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// \u0420\u0435\u0436\u0438\u043C \u043E\u0442\u043B\u0430\u0434\u043A\u0438</span>
8  <span class="token literal-property property">version</span><span class="token operator">:</span> <span class="token string">&#39;2.1&#39;</span> <span class="token comment">// \u0412\u0435\u0440\u0441\u0438\u044F \u042F.\u041A\u0430\u0440\u0442</span>
9<span class="token punctuation">}</span>
10</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>\u0422\u0435\u043F\u0435\u0440\u044C \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u044D\u0442\u0438 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043F\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430.</p><h2 id="\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430" tabindex="-1"><a class="header-anchor" href="#\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430" aria-hidden="true">#</a> \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430</h2><div class="custom-container warning"><p class="custom-container-title">WARNING</p><p>\u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043D\u0438\u043C\u0430\u043D\u0438\u0435, \u0447\u0442\u043E \u0432\u0435\u0441\u044C \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u0438\u043C. \u0415\u0441\u043B\u0438 \u0432\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0435 SSR - \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043D\u0435 \u0441\u043E\u0437\u0434\u0430\u0435\u0442\u0441\u044F \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u042D\u0442\u043E \u0432\u044B\u0437\u043E\u0432\u0435\u0442 \u043E\u0448\u0438\u0431\u043A\u0443.</p></div><h3 id="\u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u0430\u044F" tabindex="-1"><a class="header-anchor" href="#\u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u0430\u044F" aria-hidden="true">#</a> \u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u0430\u044F</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> YmapPlugin <span class="token keyword">from</span> <span class="token string">&#39;vue-yandex-maps&#39;</span>
11
12Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>YmapPlugin<span class="token punctuation">,</span> settings<span class="token punctuation">)</span>
13</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="\u043B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F" tabindex="-1"><a class="header-anchor" href="#\u043B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F" aria-hidden="true">

13#</a> \u041B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> YandexMap<span class="token punctuation">,</span> YandexMarker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-yandex-maps&#39;</span>
14
15<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
16  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> YandexMap<span class="token punctuation">,</span> YandexMarker <span class="token punctuation">}</span>
17  <span class="token comment">// other options</span>
18<span class="token punctuation">}</span>
19
20</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>YandexMap</span> <span class="token attr-name">:settings</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:coordinates</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[32, 50]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
21    <span class="token comment">&lt;!--Markers--&gt;</span>
22<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>YandexMap</span><span class="token punctuation">&gt;</span></span>
23</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ymaps-loader" tabindex="-1"><a class="header-anchor" href="#ymaps-loader" aria-hidden="true">#</a> Ymaps Loader</h3><p>\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u0443\u044E \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0443\u044E <code>ymaps</code> \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E \u043E\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043A\u0430\u0440\u0442 (\u0433\u0435\u043E\u043A\u043E\u0434\u0435\u0440 \u0438 \u0434\u0440.), \u043F\u0440\u043E\u0441\u0442\u043E \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043B\u043E\u0430\u0434\u0435\u0440 \u0441 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u043C\u0438, \u043E\u043F\u0438\u0441\u0430\u043D\u043D\u044B\u043C\u0438 \u0432\u044B\u0448\u0435. \u0423\u0447\u0442\u0438\u0442\u0435, \u0447\u0442\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043A\u0430 \u0430\u0441\u0438\u043D\u0445\u0440\u043E\u043D\u043D\u0430\u044F.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> loadYmap <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-yandex-maps&#39;</span>
24
25<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
26  <span class="token keyword">async</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
27    <span class="token keyword">await</span> <span class="token function">loadYmap</span><span class="token punctuation">(</span>settings<span class="token punctuation">)</span><span class="token punctuation">;</span>
28    <span class="token comment">// \u0437\u0434\u0435\u0441\u044C \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0430\u044F ymaps</span>
29  <span class="token punctuation">}</span>
30<span class="token punctuation">}</span>
31</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nuxt" tabindex="-1"><a class="header-anchor" href="#nuxt" aria-hidden="true">

31#</a> Nuxt</h3><p>\u041F\u0440\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u0441 <code>Nuxt</code> \u043D\u0443\u0436\u043D\u043E \u0443\u0447\u0438\u0442\u044B\u0432\u0430\u0442\u044C, \u0447\u0442\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u0438\u043C. \u041F\u0440\u0438\u043C\u0435\u0440 \u043F\u043B\u0430\u0433\u0438\u043D\u0430 \u0434\u043B\u044F \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u042F.\u041A\u0430\u0440\u0442.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// plugins/yandex-map.client.js</span>
32
33<span class="token keyword">import</span> plugin <span class="token keyword">from</span> <span class="token string">&#39;vue-yandex-maps&#39;</span>
34<span class="token keyword">import</span> <span class="token punctuation">{</span> defineNuxtPlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;nuxt/app&#39;</span>
35
36<span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token punctuation">{</span>
37  <span class="token comment">// \u0437\u0434\u0435\u0441\u044C \u0432\u0430\u0448\u0438 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438</span>
38<span class="token punctuation">}</span>
39
40<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineNuxtPlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">nuxtApp</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
41    nuxtApp<span class="token punctuation">.</span>vueApp<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>plugin<span class="token punctuation">,</span> settings<span class="token punctuation">)</span>
42<span class="token punctuation">}</span><span class="token punctuation">)</span>
43</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>\u041F\u0440\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043E\u0431\u043E\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044C \u0435\u0433\u043E \u0432 \u0442\u0435\u0433 <code>&lt;client-only&gt;</code> \u0438\u043B\u0438 \u043A\u0430\u043A\u0438\u043C-\u0442\u043E \u0435\u0449\u0435 \u043E\u0431\u0440\u0430\u0437\u043E\u043C \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044C \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u043A\u0438 \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.</p>`,16);function A(C,I){const p=t("ExternalLinkIcon"),o=t("CodeGroupItem"),c=t("CodeGroup");return l(),r("div",null,[k,n("div",m,[v,n("p",null,[h,n("a",g,[b,a(p)])])]),_,x,y,a(c,null,{default:e(()=>[a(o,{title:"YARN"},{default:e(()=>[f]),_:1}),a(o,{title:"NPM"},{default:e(()=>[w]),_:1})]),_:1}),n("p",null,[j,n("a",N,[Y,a(p)]),M]),q])}var G=i(u,[["render",A],["__file","index.html.vue"]]);export{G as default};