8d690872.345caa5b.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{73:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return r})),t.d(n,"metadata",(function(){return m})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return b}));var a=t(2),p=t(6),o=(t(0),t(121)),r={title:"\u6269\u5c55\u81ea\u5b9a\u4e49\u7ec4\u4ef6"},m={unversionedId:"intro/extending",id:"intro/extending",isDocsHomePage:!1,title:"\u6269\u5c55\u81ea\u5b9a\u4e49\u7ec4\u4ef6",description:"DOM \u7ec4\u4ef6",source:"@site/docs/intro/extending.md",slug:"/intro/extending",permalink:"/amap-react/docs/intro/extending",version:"current",sidebar:"docs",previous:{title:"\u83b7\u53d6\u7ec4\u4ef6 ref",permalink:"/amap-react/docs/intro/component-ref"},next:{title:"\u5c0f\u8d34\u58eb",permalink:"/amap-react/docs/intro/tips"}},c=[{value:"DOM \u7ec4\u4ef6",id:"dom-\u7ec4\u4ef6",children:[]},{value:"\u5730\u56fe\u7ec4\u4ef6",id:"\u5730\u56fe\u7ec4\u4ef6",children:[]},{value:"\u8fdb\u9636\u7528\u6cd5",id:"\u8fdb\u9636\u7528\u6cd5",children:[]}],i={rightToc:c};function b(e){var n=e.components,t=Object(p.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},i,t,{components:n,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"dom-\u7ec4\u4ef6"},"DOM \u7ec4\u4ef6"),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"Amap"),"\u7ec4\u4ef6\u662f\u4e00\u4e2a\u5bb9\u5668\uff0c\u4f60\u53ef\u4ee5\u628a\u81ea\u5df1\u7684\u5176\u4ed6 DOM \u7ec4\u4ef6\u4f5c\u4e3a",Object(o.b)("inlineCode",{parentName:"p"},"<Amap>...</Amap>"),"\u7684\u5b50\u7ec4\u4ef6\uff0c\u4ece\u800c\u5b9e\u73b0\u6c89\u6d78\u5f0f\u7684\u5730\u56fe App\u3002"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"// example\nreturn (\n  <Amap>\n    <div\n      className=\"searchbox\"\n      style={{ position: 'absolute', left: 0, top: 0 }}\n    >\n      ... \u4f60\u7684\u641c\u7d22\u6846UI\n    </div>\n  </Amap>\n);\n")),Object(o.b)("p",null,"\u5982\u679c\u4f60\u7684\u7ec4\u4ef6\u4e2d\u9700\u8981\u8bbf\u95ee\u6240\u5c5e\u7684",Object(o.b)("inlineCode",{parentName:"p"},"AMap.Map"),"\u5730\u56fe\u5b9e\u4f8b\uff0c\u53ef\u4ee5\u4f7f\u7528",Object(o.b)("inlineCode",{parentName:"p"},"useAmap"),"hooks\u3002"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"// example\nimport { useAmap } from '@amap/amap-react';\n\nconst map = useAmap(); // AMap.Map | undefined\n")),Object(o.b)("h2",{id:"\u5730\u56fe\u7ec4\u4ef6"},"\u5730\u56fe\u7ec4\u4ef6"),Object(o.b)("p",null,"\u5982\u679c\u4f60\u9700\u8981\u57fa\u4e8e",Object(o.b)("inlineCode",{parentName:"p"},"AMap JSAPI"),"\u5f00\u53d1\u66f4\u591a\u590d\u6742\u7684\u5730\u56fe\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7528",Object(o.b)("inlineCode",{parentName:"p"},"useAmapComponent"),"\u6765\u5f15\u5165\u66f4\u591a\u7684\u5730\u56fe\u7ec4\u4ef6"),Object(o.b)("p",null,"\u4f8b\u5982\uff0c\u57fa\u4e8e\u4e0b\u9762\u7684\u4ee3\u7801\u6a21\u5f0f\uff0c\u4f60\u53ef\u4ee5\u5b9e\u73b0\u4e00\u4e2a\u81ea\u5df1\u7684",Object(o.b)("inlineCode",{parentName:"p"},"Heatmap"),"\u7ec4\u4ef6\u3002"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"// example\nimport { useEffect } from 'react';\nimport { useAmapComponent } from '@amap/amap-react';\n\nexport default function MyHeatmap(props) {\n  const heatmap = useAmapComponent(\n    (AMap, map) => {\n      // \u521d\u59cb\u5316\u70ed\u529b\u56fe\n      const heatmap = new AMap.HeatMap(map);\n      return heatmap;\n    },\n    ['AMap.HeatMap'], // \u52a0\u8f7dAMap\u63d2\u4ef6\n  );\n\n  const { dataset } = props;\n\n  useEffect(() => {\n    if (!heatmap) return;\n    // \u54cd\u5e94\u6570\u636e\u66f4\u65b0\n    heatmap.setDataSet(set);\n  }, [heatmap, dataset]);\n}\n")),Object(o.b)("p",null,"\u5b8c\u6574\u793a\u4f8b\u8bf7\u770b",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://codesandbox.io/s/heatmap-mnq2x"}),"\u70ed\u529b\u56fe HeatMap")),Object(o.b)("h2",{id:"\u8fdb\u9636\u7528\u6cd5"},"\u8fdb\u9636\u7528\u6cd5"),Object(o.b)("p",null,"\u5982\u679c\u4f60\u9700\u8981\u57fa\u4e8e",Object(o.b)("inlineCode",{parentName:"p"},"AMap JSAPI"),"\u5f00\u53d1\u66f4\u591a\u590d\u6742\u7684\u5730\u56fe\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u57fa\u4e8e\u66f4\u539f\u59cb\u7684 hooks API \u6765\u5b9e\u73b0\uff0c\u4f8b\u5982"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"// example\nimport { useEffect } from 'react';\nimport { useAmap, usePlugins } from '@amap/amap-react';\n\nexport default function MyHeatmap(props) {\n  const map = useAmap();\n  const AMap = usePlugins(['AMap.Heatmap']);\n\n  useEffect(() => {\n    if (map && AMap) {\n      // \u8fd9\u91cc\u6267\u884c\u521d\u59cb\u5316\u903b\u8f91\n      const heatmap = new AMap.Heatmap(...);\n      map.add(heatmap);\n\n      return () => {\n        // \u8fd9\u91cc\u6267\u884c\u9500\u6bc1\u903b\u8f91\n        map.remove(heatmap);\n      };\n    }\n  }, [map, AMap]);\n\n  return null;\n}\n")),Object(o.b)("p",null,"\u5b8c\u6574\u793a\u4f8b\u8bf7\u770b",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://codesandbox.io/s/glcustomlayer-yt22k"}),"GLCustomLayer + regl")))}b.isMDXComponent=!0}}]);