7a4fffdf.5e06adf5.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{69:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),c=(n(0),n(121)),o={title:"\u4ecb\u7ecd"},p={unversionedId:"intro/index",id:"intro/index",isDocsHomePage:!1,title:"\u4ecb\u7ecd",description:"AMap-React \u662f\u4e00\u4e2a\u57fa\u4e8e React.js \u7684\u9ad8\u5fb7\u5730\u56fe AMap JSAPI \u5c01\u88c5\u3002",source:"@site/docs/intro/index.md",slug:"/intro/index",permalink:"/amap-react/docs/intro/index",version:"current",sidebar:"docs",next:{title:"\u5b89\u88c5\u4f7f\u7528",permalink:"/amap-react/docs/intro/installation"}},i=[],b={rightToc:i};function l(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(c.b)("wrapper",Object(a.a)({},b,n,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,Object(c.b)("strong",{parentName:"p"},"AMap-React \u662f\u4e00\u4e2a\u57fa\u4e8e React.js \u7684\u9ad8\u5fb7\u5730\u56fe ",Object(c.b)("a",Object(a.a)({parentName:"strong"},{href:"https://lbs.amap.com/api/javascript-api/summary"}),"AMap JSAPI")," \u5c01\u88c5\u3002")),Object(c.b)("p",null,"\u901a\u8fc7\u5b83\uff0c\u4f60\u80fd\u591f\u4ee5\u8fd1\u4f3c\u666e\u901a UI \u7ec4\u4ef6\u7684\u65b9\u5f0f\u6765\u5f00\u53d1\u5730\u56fe\u5e94\u7528\uff0c\u800c\u65e0\u9700\u5173\u5fc3 AMap \u7684\u5177\u4f53\u64cd\u4f5c\u3002"),Object(c.b)("p",null,"\u4f9d\u6258\u4e8e React \u7684\u7ec4\u4ef6\u5316\u673a\u5236\uff0c\u4f60\u53ef\u4ee5\u5bf9\u5730\u56fe\u3001\u5730\u56fe\u4e0a\u7684\u5404\u79cd\u8986\u76d6\u7269\u3001\u56fe\u5c42\u8fdb\u884c\u7ec4\u4ef6\u5316\u7684\u5f00\u53d1\u3002\u4f8b\u5982"),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"<div className=\"my-map\">\n  <Amap center={[...]} zoom={13}>\n    <Marker\n      position={[116.473179, 39.993169]}\n      label={{ content: 'Hello, AMap-React!', direction: 'bottom' }}\n      onClick={onMarkerClick}\n    />\n  </Amap>\n</div>\n")),Object(c.b)("p",null,"\u4e0e\u6b64\u540c\u65f6\uff0cAMap-React \u4f1a\u900f\u660e\u5730\u7ba1\u7406\u5730\u56fe\u76f8\u5173\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528\u719f\u6089\u7684",Object(c.b)("inlineCode",{parentName:"p"},"{ condition && <Component /> }"),"\u7b49\u65b9\u5f0f\u6765\u58f0\u660e\u5f0f\u5730\u5f00\u53d1\u5e94\u7528\u3002\u4f8b\u5982"),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{}),"{\n  focusPoint && <Marker position={focusPoint.position} />\n}\n")),Object(c.b)("p",null,"AMap-React \u7ec4\u4ef6\u5c01\u88c5\u4e86\u5bf9\u5e94 AMap \u7ec4\u4ef6\u7684\u5927\u90e8\u5206\u5c5e\u6027\u548c\u4e8b\u4ef6\uff0c\u540c\u65f6\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7",Object(c.b)("inlineCode",{parentName:"p"},"ref"),"\u83b7\u5f97\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u6765\u547d\u4ee4\u5f0f\u5730\u8c03\u7528\u5b83\u4eec\u7684\u65b9\u6cd5\uff0c\u5982",Object(c.b)("inlineCode",{parentName:"p"},"AMap.Map"),"\u7684",Object(c.b)("inlineCode",{parentName:"p"},"setFitView"),"\u3001",Object(c.b)("inlineCode",{parentName:"p"},"AMap.Marker"),"\u7684",Object(c.b)("inlineCode",{parentName:"p"},"moveTo"),"\u7b49\uff08\u53c2\u8003",Object(c.b)("a",Object(a.a)({parentName:"p"},{href:"./component-ref"}),"\u83b7\u53d6\u7ec4\u4ef6 ref"),"\uff09\u3002\u4f8b\u5982"),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const $marker = useRef();\n\nfunction play() {\n  $marker.current && $marker.current.moveTo(targetPos, 1000);\n}\n")),Object(c.b)("p",null,Object(c.b)("strong",{parentName:"p"},"\u7ee7\u7eed\u9605\u8bfb")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object(a.a)({parentName:"li"},{href:"./installation"}),"\u5b89\u88c5\u4f7f\u7528")),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object(a.a)({parentName:"li"},{href:"../references/map/index"}),"API \u6587\u6863")),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object(a.a)({parentName:"li"},{href:"../examples/index"}),"\u7efc\u5408\u793a\u4f8b"))))}l.isMDXComponent=!0}}]);