{"id":38553,"date":"2023-05-20T05:38:13","date_gmt":"2023-07-23T02:35:42","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"},"modified":"2024-04-30T05:00:51","modified_gmt":"2024-04-29T21:00:51","slug":"%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","title":{"rendered":"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"<h1>\u8d77\u521d<\/h1>\n<p>\u6211\u662f\u5728HERE\u5de5\u4f5c\u7684kekishida\u3002<br \/>\n\u4e4b\u524d\uff0c\u5728\u6211\u7684\u6587\u7ae0\u4e2d\u4ecb\u7ecd\u4e86\u5c06HERE Maps API for Javascript\u8f6c\u5316\u4e3aReact\u7ec4\u4ef6\u7684\u793a\u4f8b\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353437434c4406c6b9cf\/3-1.png\" alt=\"image.png\" \/><\/div>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">HERE Maps API for Javascript<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">HERE Geocoding &amp; Search<\/ul>\n<p>&nbsp;<\/p>\n<p>\u6211\u4eec\u5c31\u5f00\u59cb\u5427\u3002<\/p>\n<h1>\u6240\u9700\u4e4b\u7269<\/h1>\n<p>\u4ee5\u4e0b\u662f\u6837\u672c\u4ee3\u7801\u7684\u7b80\u4ecb\uff0c\u9700\u8981\u83b7\u53d6HERE\u8d26\u6237\u3002<\/p>\n<h2>\u8bf7\u6ce8\u518cHERE\u8d26\u53f7<\/h2>\n<p>&nbsp;<\/p>\n<h1>\u5236\u4f5c\u8fc7\u7a0b (zh\u00ec zu\u00f2 gu\u00f2<\/h1>\n<p>\u6211\u5c06\u9010\u6b65\u4ecb\u7ecd\u4ee5\u4e0b\u4ee3\u7801\u3002\u9664\u4e86APIKEY\u4e4b\u5916\uff0c\u57fa\u672c\u4e0a\u90fd\u53ef\u4ee5\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u6765\u5b9e\u73b0\u3002<\/p>\n<h2>\u521b\u5efa\u4e00\u4e2aReact\u9879\u76ee<\/h2>\n<pre class=\"post-pre\"><code>npx create-react-app &lt;\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u540d&gt;\r\n<\/code><\/pre>\n<h2>\u7f16\u8f91index.html<\/h2>\n<p>\u8bf7\u5c06index.html\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u4fee\u6539\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html&gt;<\/span>\r\n  <span class=\"nt\">&lt;head&gt;<\/span>\r\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n    <span class=\"nt\">&lt;title&gt;<\/span>HERE Maps API for Javascript Demo<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"initial-scale=1.0, width=device-width\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-ui.css\" \/&gt; --&gt;<\/span>\r\n    <span class=\"nt\">&lt;script\r\n      <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span>\r\n      <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-core.js\"<\/span>\r\n    <span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n    <span class=\"nt\">&lt;script\r\n      <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span>\r\n      <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-service.js\"<\/span>\r\n    <span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n    <span class=\"nt\">&lt;script\r\n      <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span>\r\n      <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-ui.js\"<\/span>\r\n    <span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n    <span class=\"nt\">&lt;script\r\n      <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span>\r\n      <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-mapevents.js\"<\/span>\r\n    <span class=\"nt\">&gt;&lt;\/script&gt;<\/span> \r\n    <span class=\"nt\">&lt;script \r\n      <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span> \r\n      <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/js.api.here.com\/v3\/3.1\/mapsjs-clustering.js\"<\/span>\r\n    <span class=\"nt\">&gt;&lt;\/script&gt;<\/span> \r\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\r\n  <span class=\"nt\">&lt;body&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"root\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n\r\n<\/code><\/pre>\n<h2>\u7f16\u8f91index.js<\/h2>\n<p>\u8bf7\u5c06index.js\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u6539\u5199\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-dom\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">App<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/App<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">root<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">createRoot<\/span><span class=\"p\">(<\/span><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\r\n<span class=\"nx\">root<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">App<\/span><span class=\"o\">\/&gt;<\/span>\r\n<span class=\"p\">);<\/span>\r\n\r\n\r\n<\/code><\/pre>\n<h2>\u7f16\u8f91App.js<\/h2>\n<p>\u8bf7\u5c06App.js\u5982\u4e0b\u4fee\u6539\u3002\u8bf7\u5c06\u4ee5\u4e0bAPIKEY\u66ff\u6362\u4e3a\u83b7\u53d6\u5230\u7684APIKEY\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nb\">Map<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Map<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Search<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Search<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">let<\/span> <span class=\"nx\">apikey<\/span> <span class=\"o\">=<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">APIKEY<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span> <span class=\"nx\">gps<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setGps<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">({<\/span><span class=\"na\">lat<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">35.6814568602531<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">lng<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">139.76799772026422<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Search<\/span> <span class=\"nx\">apikey<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">apikey<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onGeocodeResult<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">query<\/span><span class=\"o\">=&gt;<\/span> <span class=\"nf\">setGps<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">)}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nb\">Map<\/span> <span class=\"nx\">apikey<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">apikey<\/span><span class=\"p\">}<\/span> <span class=\"nx\">gps<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">gps<\/span><span class=\"p\">}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<h2>\u521b\u5efaMap.js<\/h2>\n<p>\u8bf7\u6dfb\u52a0\u4ee5\u4e0b\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nb\">Map<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">apikey<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">apikey<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">gps<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">gps<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"c1\">\/\/ Create a reference to the HTML element we want to put the map on<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">mapRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"cm\">\/**\r\n   * Create the map instance\r\n   * While `useEffect` could also be used here, `useLayoutEffect` will render\r\n   * the map sooner\r\n   *\/<\/span>\r\n    <span class=\"c1\">\/\/ React.useEffect(() =&gt; {<\/span>\r\n   <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useLayoutEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ `mapRef.current` will be `undefined` when this hook first runs; edge case that<\/span>\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">H<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">H<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">platform<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nc\">Platform<\/span><span class=\"p\">({<\/span>\r\n        <span class=\"na\">apikey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">apikey<\/span>\r\n    <span class=\"p\">});<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">defaultLayers<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">platform<\/span><span class=\"p\">.<\/span><span class=\"nf\">createDefaultLayers<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"c1\">\/\/ configure an OMV service to use the `core` endpoint<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">omvService<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">platform<\/span><span class=\"p\">.<\/span><span class=\"nf\">getOMVService<\/span><span class=\"p\">({<\/span> <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">v2\/vectortiles\/core\/mc<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">});<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">baseUrl<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/js.api.here.com\/v3\/3.1\/styles\/omv\/oslo\/japan\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"c1\">\/\/ create a Japan specific style<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">style<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nc\">Style<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">baseUrl<\/span><span class=\"p\">}<\/span><span class=\"s2\">normal.day.yaml`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">baseUrl<\/span><span class=\"p\">);<\/span>\r\n\r\n    <span class=\"c1\">\/\/ instantiate provider and layer for the base map<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">omvProvider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">omv<\/span><span class=\"p\">.<\/span><span class=\"nc\">Provider<\/span><span class=\"p\">(<\/span><span class=\"nx\">omvService<\/span><span class=\"p\">,<\/span> <span class=\"nx\">style<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">omvlayer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nx\">layer<\/span><span class=\"p\">.<\/span><span class=\"nc\">TileLayer<\/span><span class=\"p\">(<\/span><span class=\"nx\">omvProvider<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">max<\/span><span class=\"p\">:<\/span> <span class=\"mi\">22<\/span> <span class=\"p\">,<\/span><span class=\"na\">dark<\/span><span class=\"p\">:<\/span><span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\r\n\r\n    <span class=\"c1\">\/\/ instantiate (and display) a map:<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">map<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nc\">Map<\/span><span class=\"p\">(<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">,<\/span> <span class=\"nx\">omvlayer<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"na\">zoom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">16<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">center<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">lat<\/span><span class=\"p\">:<\/span> <span class=\"nx\">gps<\/span><span class=\"p\">.<\/span><span class=\"nx\">lat<\/span><span class=\"p\">,<\/span> <span class=\"na\">lng<\/span><span class=\"p\">:<\/span> <span class=\"nx\">gps<\/span><span class=\"p\">.<\/span><span class=\"nx\">lng<\/span> <span class=\"p\">},<\/span>\r\n    <span class=\"p\">});<\/span>\r\n\r\n    <span class=\"c1\">\/\/ add a resize listener to make sure that the map occupies the whole container<\/span>\r\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">resize<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nf\">getViewPort<\/span><span class=\"p\">().<\/span><span class=\"nf\">resize<\/span><span class=\"p\">());<\/span>\r\n\r\n    <span class=\"c1\">\/\/ MapEvents enables the event system<\/span>\r\n    <span class=\"c1\">\/\/ Behavior implements default interactions for pan\/zoom (also on mobile touch environments)<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">behavior<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapevents<\/span><span class=\"p\">.<\/span><span class=\"nc\">Behavior<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapevents<\/span><span class=\"p\">.<\/span><span class=\"nc\">MapEvents<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">));<\/span>\r\n    <span class=\"c1\">\/\/ Create the default UI components<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">ui<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">ui<\/span><span class=\"p\">.<\/span><span class=\"nx\">UI<\/span><span class=\"p\">.<\/span><span class=\"nf\">createDefault<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">,<\/span> <span class=\"nx\">defaultLayers<\/span><span class=\"p\">);<\/span> \r\n    <span class=\"c1\">\/\/ Marker code goes here<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">LocationOfMarker<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">lat<\/span><span class=\"p\">:<\/span> <span class=\"nx\">gps<\/span><span class=\"p\">.<\/span><span class=\"nx\">lat<\/span><span class=\"p\">,<\/span> <span class=\"na\">lng<\/span><span class=\"p\">:<\/span> <span class=\"nx\">gps<\/span><span class=\"p\">.<\/span><span class=\"nx\">lng<\/span> <span class=\"p\">};<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">pngIcon<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nc\">Icon<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;&lt;path d=\"M12 2c2.131 0 4 1.73 4 3.702 0 2.05-1.714 4.941-4 8.561-2.286-3.62-4-6.511-4-8.561 0-1.972 1.869-3.702 4-3.702zm0-2c-3.148 0-6 2.553-6 5.702 0 3.148 2.602 6.907 6 12.298 3.398-5.391 6-9.15 6-12.298 0-3.149-2.851-5.702-6-5.702zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zm10.881-2.501c0-1.492-.739-2.83-1.902-3.748l.741-.752c1.395 1.101 2.28 2.706 2.28 4.5s-.885 3.4-2.28 4.501l-.741-.753c1.163-.917 1.902-2.256 1.902-3.748zm-3.381 2.249l.74.751c.931-.733 1.521-1.804 1.521-3 0-1.195-.59-2.267-1.521-3l-.74.751c.697.551 1.141 1.354 1.141 2.249s-.444 1.699-1.141 2.249zm-16.479 1.499l-.741.753c-1.395-1.101-2.28-2.707-2.28-4.501s.885-3.399 2.28-4.5l.741.752c-1.163.918-1.902 2.256-1.902 3.748s.739 2.831 1.902 3.748zm.338-3.748c0-.896.443-1.698 1.141-2.249l-.74-.751c-.931.733-1.521 1.805-1.521 3 0 1.196.59 2.267 1.521 3l.74-.751c-.697-.55-1.141-1.353-1.141-2.249zm16.641 14.501c0 2.209-3.581 4-8 4s-8-1.791-8-4c0-1.602 1.888-2.98 4.608-3.619l1.154 1.824c-.401.068-.806.135-1.178.242-3.312.949-3.453 2.109-.021 3.102 2.088.603 4.777.605 6.874-.001 3.619-1.047 3.164-2.275-.268-3.167-.296-.077-.621-.118-.936-.171l1.156-1.828c2.723.638 4.611 2.016 4.611 3.618z\"\/&gt;&lt;\/svg&gt;<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">size<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">w<\/span><span class=\"p\">:<\/span> <span class=\"mi\">56<\/span><span class=\"p\">,<\/span> <span class=\"na\">h<\/span><span class=\"p\">:<\/span> <span class=\"mi\">56<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\r\n\r\n    <span class=\"c1\">\/\/ Create a marker using the previously instantiated icon:<\/span>\r\n    <span class=\"kd\">var<\/span> <span class=\"nx\">marker<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nc\">Marker<\/span><span class=\"p\">(<\/span><span class=\"nx\">LocationOfMarker<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"nx\">pngIcon<\/span> <span class=\"p\">});<\/span>\r\n\r\n    <span class=\"c1\">\/\/ Add the marker to the map:<\/span>\r\n    <span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nf\">addObject<\/span><span class=\"p\">(<\/span><span class=\"nx\">marker<\/span><span class=\"p\">);<\/span>\r\n   \r\n    <span class=\"c1\">\/\/ Optionally, <\/span>\r\n    <span class=\"c1\">\/\/Show the marker in the center of the map<\/span>\r\n    <span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nf\">setCenter<\/span><span class=\"p\">(<\/span><span class=\"nx\">LocationOfMarker<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"c1\">\/\/ This will act as a cleanup to run once this hook runs again.<\/span>\r\n    <span class=\"c1\">\/\/ This includes when the component un-mounts<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">map<\/span><span class=\"p\">.<\/span><span class=\"nf\">dispose<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">};<\/span>\r\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">gps<\/span><span class=\"p\">]);<\/span> <span class=\"c1\">\/\/ This will run this hook every time this ref is updated<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">100%<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">height<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">500px<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">}<\/span>  <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">}<\/span>  <span class=\"sr\">\/&gt;<\/span><span class=\"err\">;\r\n<\/span><span class=\"p\">};<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nb\">Map<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h2>\u521b\u5efaSearch.js<\/h2>\n<p>\u8bf7\u5c06\u4ee5\u4e0b\u6587\u4ef6\u6dfb\u52a0\u8fdb\u53bb\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Search<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span><span class=\"nx\">setText<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">addText<\/span><span class=\"p\">,<\/span><span class=\"nx\">setAddText<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">apikey<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">apikey<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">H<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">H<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">platform<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">H<\/span><span class=\"p\">.<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nc\">Platform<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">apikey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">apikey<\/span>\r\n  <span class=\"p\">});<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">service<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">platform<\/span><span class=\"p\">.<\/span><span class=\"nf\">getSearchService<\/span><span class=\"p\">();<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onClickSearch<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nf\">geocode<\/span><span class=\"p\">({<\/span>\r\n        <span class=\"na\">q<\/span><span class=\"p\">:<\/span> <span class=\"nx\">text<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">limit<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span>\r\n      <span class=\"p\">},<\/span> <span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">);<\/span>\r\n          <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">onGeocodeResult<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"p\">});<\/span>\r\n      <span class=\"p\">},<\/span> <span class=\"nx\">alert<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nf\">setText<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span> <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">query<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">query<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">event<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">setText<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\r\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Search location<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onClickSearch<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Search<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Search<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353437434c4406c6b9cf\/31-0.png\" alt=\"image.png\" \/><\/div>\n<h2>\u9879\u76ee\u7684\u6267\u884c de<\/h2>\n<pre class=\"post-pre\"><code>npm start\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353437434c4406c6b9cf\/34-0.gif\" alt=\"\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8.gif\" \/><\/div>\n<h1>\u6700\u540e<\/h1>\n<p>\u8fd9\u6b21\u4ecb\u7ecd\u4e86\u5c06HERE Maps API for Javascript\u8fdb\u884cReact\u7ec4\u4ef6\u5316\u7684\u793a\u4f8b\u3002\u867d\u7136\u5728\u4ee5\u524d\u7684\u6587\u7ae0\u4e2d\u4e5f\u8fdb\u884c\u4e86\u4ecb\u7ecd\uff0c\u4f46\u662f\u8fd9\u6b21\u4ecb\u7ecd\u7684\u4ee3\u7801\u53ef\u4ee5\u57fa\u4e8e\u6b64\uff0c\u4e0d\u4ec5\u53ef\u4ee5\u5b9e\u73b0HERE Geocoding &amp; Search API\uff0c\u8fd8\u53ef\u4ee5\u5bb9\u6613\u5730\u5b9e\u73b0\u7c7b\u4f3c\u805a\u7c7b\u529f\u80fd\u548cHERE Routing API\u7b49\u3002\u5e0c\u671b\u53ef\u4ee5\u4f5c\u4e3a\u53c2\u8003\u3002\u975e\u5e38\u611f\u8c22\u60a8\u7684\u9605\u8bfb\u3002<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8d77\u521d \u6211\u662f\u5728HERE\u5de5\u4f5c\u7684kekishida\u3002 \u4e4b\u524d\uff0c\u5728\u6211\u7684\u6587\u7ae0\u4e2d\u4ecb\u7ecd\u4e86\u5c06HERE Maps API for  [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38553","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8ereact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\" \/>\n<meta property=\"og:description\" content=\"\u8d77\u521d \u6211\u662f\u5728HERE\u5de5\u4f5c\u7684kekishida\u3002 \u4e4b\u524d\uff0c\u5728\u6211\u7684\u6587\u7ae0\u4e2d\u4ecb\u7ecd\u4e86\u5c06HERE Maps API for [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8ereact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-23T02:35:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T21:00:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353437434c4406c6b9cf\/3-1.png\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"name\":\"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-23T02:35:42+00:00\",\"dateModified\":\"2024-04-29T21:00:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8ereact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f","og_description":"\u8d77\u521d \u6211\u662f\u5728HERE\u5de5\u4f5c\u7684kekishida\u3002 \u4e4b\u524d\uff0c\u5728\u6211\u7684\u6587\u7ae0\u4e2d\u4ecb\u7ecd\u4e86\u5c06HERE Maps API for [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8ereact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-23T02:35:42+00:00","article_modified_time":"2024-04-29T21:00:51+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353437434c4406c6b9cf\/3-1.png"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","name":"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-23T02:35:42+00:00","dateModified":"2024-04-29T21:00:51+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8eReact\u7684\u5730\u56fe\u5e94\u7528\u7a0b\u5e8f"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%9f%ba%e4%ba%8ereact%e7%9a%84%e5%9c%b0%e5%9b%be%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38553"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38553\/revisions"}],"predecessor-version":[{"id":89841,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38553\/revisions\/89841"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}