-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
30 lines (30 loc) · 19.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
<title data-react-helmet="true">AMap-React | AMap-React</title><meta data-react-helmet="true" property="og:title" content="AMap-React | AMap-React"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" name="docusaurus_language" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="shortcut icon" href="/amap-react/img/favicon.ico"><link rel="stylesheet" href="/amap-react/styles.e5f0e2ab.css">
<link rel="preload" href="/amap-react/styles.35737690.js" as="script">
<link rel="preload" href="/amap-react/runtime~main.964b97ee.js" as="script">
<link rel="preload" href="/amap-react/main.3ca2f435.js" as="script">
<link rel="preload" href="/amap-react/common.ad3382f1.js" as="script">
<link rel="preload" href="/amap-react/4.5b1403bc.js" as="script">
<link rel="preload" href="/amap-react/6.1bb2f953.js" as="script">
<link rel="preload" href="/amap-react/ce9b1bb5.6305348d.js" as="script">
<link rel="preload" href="/amap-react/9dd8a0d2.26b26cad.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/amap-react/"><img class="navbar__logo" src="/amap-react/img/logo.png" alt="logo"><strong class="navbar__title">AMap-React</strong></a><a class="navbar__item navbar__link" href="/amap-react/docs/intro/index">介绍</a><a class="navbar__item navbar__link" href="/amap-react/docs/references/map/index">API 文档</a><a class="navbar__item navbar__link" href="/amap-react/docs/examples/index">示例</a></div><div class="navbar__items navbar__items--right"><a href="https://lbs.amap.com/api/jsapi-v2/summary/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">AMap JSAPI 2.0 文档</a><a href="https://lbs.amap.com/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">高德开放平台</a></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/amap-react/"><img class="navbar__logo" src="/amap-react/img/logo.png" alt="logo"><strong class="navbar__title">AMap-React</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/amap-react/docs/intro/index">介绍</a></li><li class="menu__list-item"><a class="menu__link" href="/amap-react/docs/references/map/index">API 文档</a></li><li class="menu__list-item"><a class="menu__link" href="/amap-react/docs/examples/index">示例</a></li><li class="menu__list-item"><a href="https://lbs.amap.com/api/jsapi-v2/summary/" target="_blank" rel="noopener noreferrer" class="menu__link">AMap JSAPI 2.0 文档</a></li><li class="menu__list-item"><a href="https://lbs.amap.com/" target="_blank" rel="noopener noreferrer" class="menu__link">高德开放平台</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="homePage_1ZpC"><header class="hero hero--primary-- heroBanner_2Ftp"><div class="hero__logo"><img class="heroLogo_cGK-" src="img/logo.png" alt="logo"></div><h1 class="hero__title heroTitle_StMF">AMap-React</h1><p class="hero__subtitle heroSubtitle_-YYb">Using AMap with React in an easy way.</p><div class="buttons_1Wc3"><a class="button button--outline button--primary button--lg" href="/amap-react/docs/intro/index">快速上手 →</a></div></header><main><section class="features_P2SU"><div class="col col--4 feature_24Br"><h3>React 驱动</h3><p>支持 React 的组件树、生命周期、props 绑定、hooks 等特性，类似的 API、类似的开发思维。</p></div><div class="col col--4 feature_24Br"><h3>简洁至上</h3><p>无需关心地图和地图上的各种元素的加载、初始化、更新、销毁，只需要像普通视图组件一样使用。</p></div><div class="col col--4 feature_24Br"><h3>可集成、可扩展</h3><p>可以在地图内嵌入 DOM 组件，开发沉浸式地图应用。 通过 hooks 获取 AMap.Map 对象，扩展更多地图组件。</p></div></section></main><header class="notice_1Urh"><p class="heroSubtitle_-YYb">现已支持 AMap JSAPI 2.0！</p></header><section class="example_nTJG"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> --save @amap/amap-react</span></div></div></div></div><div style="width:100%;height:400px"></div><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> React </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'react'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Amap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Marker </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'@amap/amap-react'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">default</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">function</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'100%'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'400px'</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">Amap</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">map</span><span class="token tag style-attr language-css attr-name" style="color:rgb(255, 203, 107)">Style</span><span class="token tag style-attr language-css punctuation" style="color:rgb(199, 146, 234)">="</span><span class="token tag style-attr language-css attr-value property" style="color:rgb(255, 85, 114)">amap</span><span class="token tag style-attr language-css attr-value punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token tag style-attr language-css attr-value" style="color:rgb(255, 85, 114)">//styles/whitesmoke</span><span class="token tag style-attr language-css punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">zoom</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">15</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">center</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">116.473179</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">39.993169</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">Marker</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">position</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">116.473179</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">39.993169</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">label</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> content</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'Hello, AMap-React!'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> direction</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'bottom'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">Amap</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></div></div></section></div></div><footer class="footer"><div class="container"><div class="text--center"><div>Copyright © 2021 Amap.com.</div></div></div></footer></div>
<script src="/amap-react/styles.35737690.js"></script>
<script src="/amap-react/runtime~main.964b97ee.js"></script>
<script src="/amap-react/main.3ca2f435.js"></script>
<script src="/amap-react/common.ad3382f1.js"></script>
<script src="/amap-react/4.5b1403bc.js"></script>
<script src="/amap-react/6.1bb2f953.js"></script>
<script src="/amap-react/ce9b1bb5.6305348d.js"></script>
<script src="/amap-react/9dd8a0d2.26b26cad.js"></script>
</body>
</html>