bf614533.3cdf8a46.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{79:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return r})),t.d(a,"rightToc",(function(){return p})),t.d(a,"default",(function(){return m}));var b=t(2),n=t(6),l=(t(0),t(121)),i={title:"\u793a\u4f8b"},r={unversionedId:"examples/index",id:"examples/index",isDocsHomePage:!1,title:"\u793a\u4f8b",description:"\u6df1\u5165\u6d45\u51fa",source:"@site/docs/examples/index.md",slug:"/examples/index",permalink:"/amap-react/docs/examples/index",version:"current",sidebar:"docs",previous:{title:"\u5b9e\u7528\u51fd\u6570",permalink:"/amap-react/docs/references/utils/index"}},p=[{value:"\u6df1\u5165\u6d45\u51fa",id:"\u6df1\u5165\u6d45\u51fa",children:[]},{value:"\u5e94\u7528\u5b9e\u4f8b",id:"\u5e94\u7528\u5b9e\u4f8b",children:[]}],c={rightToc:p};function m(e){var a=e.components,t=Object(n.a)(e,["components"]);return Object(l.b)("wrapper",Object(b.a)({},c,t,{components:a,mdxType:"MDXLayout"}),Object(l.b)("h3",{id:"\u6df1\u5165\u6d45\u51fa"},"\u6df1\u5165\u6d45\u51fa"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/hello-kicj2"}),"Hello AMap-React")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u6700\u57fa\u672c\u7684\u5165\u95e8\u7528\u6cd5"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/shuxingheshijian-c73b3"}),"\u5c5e\u6027\u548c\u4e8b\u4ef6\u7ed1\u5b9a")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u5c06 React \u7ec4\u4ef6\u72b6\u6001\u7ed1\u5b9a\u5230\u5730\u56fe\u7ec4\u4ef6\u7684\u5c5e\u6027"),Object(l.b)("li",{parentName:"ul"},"\u5728 React \u7ec4\u4ef6\u4e2d\u54cd\u5e94\u5730\u56fe\u7ec4\u4ef6\u7684\u4e8b\u4ef6"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/zidingyimarker-6dwkd"}),"\u81ea\u5b9a\u4e49 Marker")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528 React \u548c JSX \u4fbf\u6377\u5730\u5f00\u53d1\u81ea\u5b9a\u4e49\u6837\u5f0f\u7684\u70b9\u6807\u8bb0"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/satellite-and-traffic-layer-w6bly"}),"\u53e0\u52a0\u663e\u793a\u536b\u661f\u56fe/\u8def\u51b5\u56fe")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"SatelliteLayer"),"\u548c",Object(l.b)("inlineCode",{parentName:"li"},"TrafficLayer")),Object(l.b)("li",{parentName:"ul"},"\u901a\u8fc7",Object(l.b)("inlineCode",{parentName:"li"},"opacity"),"\u63a7\u5236\u56fe\u5c42\u7684\u900f\u660e\u5ea6"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/controllable-buvxn"}),"\u53d7\u63a7\u7ec4\u4ef6")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u5c06\u5730\u56fe\u4f5c\u4e3a\u53d7\u63a7\u7ec4\u4ef6\u4f7f\u7528"),Object(l.b)("li",{parentName:"ul"},"\u7ed1\u5b9a",Object(l.b)("inlineCode",{parentName:"li"},"center"),"\u3001",Object(l.b)("inlineCode",{parentName:"li"},"zoom"),"\u3001",Object(l.b)("inlineCode",{parentName:"li"},"pitch"),"\u3001",Object(l.b)("inlineCode",{parentName:"li"},"rotation"),"\u5c5e\u6027"),Object(l.b)("li",{parentName:"ul"},"\u7ed1\u5b9a",Object(l.b)("inlineCode",{parentName:"li"},"mapmove"),"\u3001",Object(l.b)("inlineCode",{parentName:"li"},"zoomchange"),"\u3001",Object(l.b)("inlineCode",{parentName:"li"},"dragging"),"\u7b49\u4e8b\u4ef6\uff0c\u540c\u6b65\u4e0a\u8ff0\u5c5e\u6027\u7684\u503c"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/dalianglabelmarker-f7mxo"}),"\u5927\u91cf LabelMarker")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0c\u63a5\u7ba1\u5927\u91cf\u6570\u636e\u7684\u751f\u547d\u5468\u671f"),Object(l.b)("li",{parentName:"ul"},"\u76f4\u63a5\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"AMap.LabelsLayer"),"\u548c",Object(l.b)("inlineCode",{parentName:"li"},"AMap.LabelMarker"),"\u6e32\u67d3\u5927\u91cf\u7684\u6570\u636e"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/geo-location-jomlv"}),"\u5b9a\u4f4d GeoLocation")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u52a0\u8f7d",Object(l.b)("inlineCode",{parentName:"li"},"AMap.GeoLocation"),"\u670d\u52a1\u63d2\u4ef6\uff0c\u7528",Object(l.b)("inlineCode",{parentName:"li"},"getCurrentLocation"),"\u65b9\u6cd5\u83b7\u53d6\u5f53\u524d\u5b9a\u4f4d\u70b9"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"Marker"),"\u5c55\u793a\u5b9a\u4f4d\u70b9\uff0c\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"Circle"),"\u5c55\u793a\u5b9a\u4f4d\u7cbe\u5ea6"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/useamapevents-qcztz"}),"\u81ea\u5b9a\u4e49\u7f29\u653e\u6309\u94ae")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"useAmap"),"\u83b7\u53d6",Object(l.b)("inlineCode",{parentName:"li"},"AMap.Map"),"\u5b9e\u4f8b\u5bf9\u8c61"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"useAmapEvents"),"\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u83b7\u53d6\u5730\u56fe\u7684\u7f29\u653e\u7ea7\u522b"),Object(l.b)("li",{parentName:"ul"},"\u5b9e\u73b0\u7f29\u653e\u6309\u94ae\uff0c\u5c55\u793a\u5f53\u524d\u7f29\u653e\u7ea7\u522b\uff0c\u5e76\u81ea\u5b9a\u4e49\u6837\u5f0f"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/place-search-mebtt"}),"\u641c\u7d22\u6846")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528 ",Object(l.b)("a",Object(b.a)({parentName:"li"},{href:"https://ant.design/"}),"Ant Design")," \u6784\u5efa UI \u7ec4\u4ef6"),Object(l.b)("li",{parentName:"ul"},"\u901a\u8fc7\u7edd\u5bf9\u5b9a\u4f4d\u6765\u5e03\u7f6e\u641c\u7d22\u6846\u4e0e\u641c\u7d22\u7ed3\u679c\u5217\u8868\uff0c\u8ba9\u5b83\u4eec\u60ac\u6d6e\u5728\u5730\u56fe\u4e4b\u4e0a"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"AMap.DistrictSearch"),"\u670d\u52a1\u63d2\u4ef6\u5b9e\u73b0\u57ce\u5e02\u9009\u62e9\u5668"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"AMap.AutoComplete"),"\u670d\u52a1\u63d2\u4ef6\u5b9e\u73b0\u641c\u7d22\u5efa\u8bae\u529f\u80fd"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"AMap.PlaceSearch"),"\u670d\u52a1\u63d2\u4ef6\u5b9e\u73b0\u5730\u70b9\u641c\u7d22"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/heatmap-mnq2x"}),"\u70ed\u529b\u56fe HeatMap")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u52a0\u8f7d",Object(l.b)("inlineCode",{parentName:"li"},"AMap.HeatMap"),"\u63d2\u4ef6\uff0c\u5c06\u6570\u636e\u4ee5\u70ed\u529b\u56fe\u65b9\u5f0f\u5c55\u73b0")))),Object(l.b)("h3",{id:"\u5e94\u7528\u5b9e\u4f8b"},"\u5e94\u7528\u5b9e\u4f8b"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/guijihuifang-7l6h3"}),"\u8f68\u8ff9\u56de\u653e")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528\u81ea\u5b9a\u4e49",Object(l.b)("inlineCode",{parentName:"li"},"Marker"),"\u5b9e\u73b0\u5c0f\u8f66\u56fe\u6807"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"Polyline"),"\u5c55\u793a\u8f68\u8ff9"),Object(l.b)("li",{parentName:"ul"},"\u901a\u8fc7",Object(l.b)("inlineCode",{parentName:"li"},"ref"),"\u83b7\u53d6\u70b9\u6807\u8bb0\u5b9e\u4f8b\uff0c\u8c03\u7528",Object(l.b)("inlineCode",{parentName:"li"},"moveAlong"),"\u65b9\u6cd5\u8ba9\u5b83\u6cbf\u7740\u8f68\u8ff9\u79fb\u52a8"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/wangjing-ranking-5lc3k"}),"\u5c0f\u533a\u6392\u884c")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528\u591a\u4e2a",Object(l.b)("inlineCode",{parentName:"li"},"Polygon"),"\u5c55\u793a\u5c0f\u533a\uff0c\u6839\u636e\u6392\u884c\u4e3a\u5b83\u4eec\u6307\u5b9a\u586b\u5145\u8272"),Object(l.b)("li",{parentName:"ul"},"\u54cd\u5e94\u9f20\u6807\u4e8b\u4ef6\uff0c\u8ba9\u5bf9\u5e94\u7684\u5c0f\u533a\u9ad8\u4eae\u663e\u793a"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"InfoWindow"),"\u663e\u793a\u9009\u4e2d\u5c0f\u533a\u7684\u8be6\u60c5"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/xingzhengqutongji-t25m1"}),"\u5404\u7701GDP\u589e\u901f\u53ef\u89c6\u5316")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528\u7b80\u6613\u884c\u653f\u533a\u56fe",Object(l.b)("inlineCode",{parentName:"li"},"<CountryLayer>"),"\u5c55\u73b0\u5404\u7701\u8fb9\u754c"),Object(l.b)("li",{parentName:"ul"},"\u6839\u636e\u5404\u7701GDP\u589e\u901f\u5bf9\u7701\u8fdb\u884c\u4e0d\u540c\u6df1\u6d45\u7684\u7740\u8272"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"<LabelMarker>"),"\u5c55\u73b0\u5404\u7701\u540d\u79f0"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/polygon-editor-p08i3"}),"\u56f4\u680f\u7ed8\u5236\u4e0e\u7f16\u8f91")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u54cd\u5e94\u9f20\u6807\u4e8b\u4ef6\uff0c\u5c06\u70b9\u51fb\u7684\u4f4d\u7f6e\u52a0\u5165\u5230\u591a\u8fb9\u5f62\u8def\u5f84\u4e2d"),Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528",Object(l.b)("inlineCode",{parentName:"li"},"PolygonEditor"),"\u7f16\u8f91\u591a\u8fb9\u5f62"),Object(l.b)("li",{parentName:"ul"},"\u5c06\u56f4\u680f\u7ed3\u679c\u5bfc\u51fa\u6210 JSON"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/marker-cluster-mb7vk"}),"\u70b9\u805a\u5408 MarkerCluster")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u52a0\u8f7d",Object(l.b)("inlineCode",{parentName:"li"},"AMap.MarkerCluster"),"\u63d2\u4ef6"),Object(l.b)("li",{parentName:"ul"},"\u901a\u8fc7 react-dom \u4f7f\u7528 JSX \u6765\u81ea\u5b9a\u4e49\u70b9\u805a\u5408\u7684\u6807\u8bb0\u70b9\u5185\u5bb9"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("p",{parentName:"li"},Object(l.b)("a",Object(b.a)({parentName:"p"},{href:"https://codesandbox.io/s/glcustomlayer-yt22k"}),"GLCustomLayer + regl")),Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"\u4f7f\u7528 ",Object(l.b)("a",Object(b.a)({parentName:"li"},{href:"https://developer.amap.com/demo/jsapi-v2/example/selflayer/glcustomlayer-regl"}),"AMap.GLCustomLayer")," \u7ed3\u5408 ",Object(l.b)("a",Object(b.a)({parentName:"li"},{href:"https://github.com/regl-project/regl"}),"regl")," \u6e32\u67d3\u6d77\u91cf\u70b9")))))}m.isMDXComponent=!0}}]);