[{"data":1,"prerenderedAt":715},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-first-map":67,"-getting-started-first-map-surround":710},[4,23,53],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":22},"快速上手","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"安装","\u002Fgetting-started\u002Finstallation","01.getting-started\u002F01.installation",{"title":15,"path":16,"stem":17},"密钥（tk）","\u002Fgetting-started\u002Fapikey","01.getting-started\u002F02.apikey",{"title":19,"path":20,"stem":21},"第一个地图","\u002Fgetting-started\u002Ffirst-map","01.getting-started\u002F03.first-map",false,{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":22},"组件","i-lucide-component","\u002Fcomponents","02.components",[29,33,37,41,45,49],{"title":30,"path":31,"stem":32},"地图","\u002Fcomponents\u002Fmap","02.components\u002F01.map",{"title":34,"path":35,"stem":36},"覆盖物","\u002Fcomponents\u002Foverlays","02.components\u002F02.overlays",{"title":38,"path":39,"stem":40},"控件","\u002Fcomponents\u002Fcontrols","02.components\u002F03.controls",{"title":42,"path":43,"stem":44},"工具","\u002Fcomponents\u002Ftools","02.components\u002F04.tools",{"title":46,"path":47,"stem":48},"图层","\u002Fcomponents\u002Flayers","02.components\u002F05.layers",{"title":50,"path":51,"stem":52},"标绘","\u002Fcomponents\u002Fplot-symbols","02.components\u002F06.plot-symbols",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":22},"服务","i-lucide-plug","\u002Fservices","03.services",[59,63],{"title":60,"path":61,"stem":62},"REST 服务","\u002Fservices\u002Frest","03.services\u002F01.rest",{"title":64,"path":65,"stem":66},"SDK 服务","\u002Fservices\u002Fcomposables","03.services\u002F02.composables",{"id":68,"title":19,"body":69,"description":704,"extension":705,"links":706,"meta":707,"navigation":172,"path":20,"seo":708,"stem":21,"__hash__":709},"docs\u002F01.getting-started\u002F03.first-map.md",{"type":70,"value":71,"toc":698},"minimark",[72,84,89,331,335,519,523,682,685,688,695],[73,74,75,79,80,83],"p",{},[76,77,78],"code",{},"\u003CTdtMap>"," 即地图容器，",[76,81,82],{},"tk"," 传入浏览器端密钥。",[85,86,88],"h2",{"id":87},"vue-3","Vue 3",[90,91,96],"pre",{"className":92,"code":93,"language":94,"meta":95,"style":95},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { TdtMap, TdtMarker } from \"@tianditu\u002Fvue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTdtMap tk=\"你的浏览器端密钥\" :center=\"[116.404, 39.915]\" :zoom=\"12\" style=\"width: 100%; height: 100%\">\n    \u003CTdtMarker :lnglat=\"[116.404, 39.915]\" \u002F>\n  \u003C\u002FTdtMap>\n\u003C\u002Ftemplate>\n","vue","",[76,97,98,118,157,167,174,184,279,312,322],{"__ignoreMap":95},[99,100,103,107,111,115],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"sMK4o","\u003C",[99,108,110],{"class":109},"swJcz","script",[99,112,114],{"class":113},"spNyl"," setup",[99,116,117],{"class":105},">\n",[99,119,121,125,128,132,135,138,141,144,147,151,154],{"class":101,"line":120},2,[99,122,124],{"class":123},"s7zQu","import",[99,126,127],{"class":105}," {",[99,129,131],{"class":130},"sTEyZ"," TdtMap",[99,133,134],{"class":105},",",[99,136,137],{"class":130}," TdtMarker",[99,139,140],{"class":105}," }",[99,142,143],{"class":123}," from",[99,145,146],{"class":105}," \"",[99,148,150],{"class":149},"sfazB","@tianditu\u002Fvue",[99,152,153],{"class":105},"\"",[99,155,156],{"class":105},";\n",[99,158,160,163,165],{"class":101,"line":159},3,[99,161,162],{"class":105},"\u003C\u002F",[99,164,110],{"class":109},[99,166,117],{"class":105},[99,168,170],{"class":101,"line":169},4,[99,171,173],{"emptyLinePlaceholder":172},true,"\n",[99,175,177,179,182],{"class":101,"line":176},5,[99,178,106],{"class":105},[99,180,181],{"class":109},"template",[99,183,117],{"class":105},[99,185,187,190,193,196,199,201,204,206,209,212,214,216,219,223,226,229,232,234,236,239,241,243,246,248,251,253,255,259,262,265,268,271,273,275,277],{"class":101,"line":186},6,[99,188,189],{"class":105},"  \u003C",[99,191,192],{"class":109},"TdtMap",[99,194,195],{"class":113}," tk",[99,197,198],{"class":105},"=",[99,200,153],{"class":105},[99,202,203],{"class":149},"你的浏览器端密钥",[99,205,153],{"class":105},[99,207,208],{"class":105}," :",[99,210,211],{"class":113},"center",[99,213,198],{"class":105},[99,215,153],{"class":105},[99,217,218],{"class":105},"[",[99,220,222],{"class":221},"sbssI","116.404",[99,224,225],{"class":105},", ",[99,227,228],{"class":221},"39.915",[99,230,231],{"class":105},"]",[99,233,153],{"class":105},[99,235,208],{"class":105},[99,237,238],{"class":113},"zoom",[99,240,198],{"class":105},[99,242,153],{"class":105},[99,244,245],{"class":221},"12",[99,247,153],{"class":105},[99,249,250],{"class":113}," style",[99,252,198],{"class":105},[99,254,153],{"class":105},[99,256,258],{"class":257},"sqsOY","width",[99,260,261],{"class":105},": ",[99,263,264],{"class":221},"100%",[99,266,267],{"class":105},"; ",[99,269,270],{"class":257},"height",[99,272,261],{"class":105},[99,274,264],{"class":221},[99,276,153],{"class":105},[99,278,117],{"class":105},[99,280,282,285,288,290,293,295,297,299,301,303,305,307,309],{"class":101,"line":281},7,[99,283,284],{"class":105},"    \u003C",[99,286,287],{"class":109},"TdtMarker",[99,289,208],{"class":105},[99,291,292],{"class":113},"lnglat",[99,294,198],{"class":105},[99,296,153],{"class":105},[99,298,218],{"class":105},[99,300,222],{"class":221},[99,302,225],{"class":105},[99,304,228],{"class":221},[99,306,231],{"class":105},[99,308,153],{"class":105},[99,310,311],{"class":105}," \u002F>\n",[99,313,315,318,320],{"class":101,"line":314},8,[99,316,317],{"class":105},"  \u003C\u002F",[99,319,192],{"class":109},[99,321,117],{"class":105},[99,323,325,327,329],{"class":101,"line":324},9,[99,326,162],{"class":105},[99,328,181],{"class":109},[99,330,117],{"class":105},[85,332,334],{"id":333},"react","React",[90,336,340],{"className":337,"code":338,"language":339,"meta":95,"style":95},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { TdtMap, TdtMarker } from \"@tianditu\u002Freact\";\n\nfunction App() {\n  return (\n    \u003CTdtMap tk=\"你的浏览器端密钥\" center={[116.404, 39.915]} zoom={12} style={{ width: \"100%\", height: \"100%\" }}>\n      \u003CTdtMarker lnglat={[116.404, 39.915]} \u002F>\n    \u003C\u002FTdtMap>\n  );\n}\n","tsx",[76,341,342,367,371,386,394,473,498,507,514],{"__ignoreMap":95},[99,343,344,346,348,350,352,354,356,358,360,363,365],{"class":101,"line":102},[99,345,124],{"class":123},[99,347,127],{"class":105},[99,349,131],{"class":130},[99,351,134],{"class":105},[99,353,137],{"class":130},[99,355,140],{"class":105},[99,357,143],{"class":123},[99,359,146],{"class":105},[99,361,362],{"class":149},"@tianditu\u002Freact",[99,364,153],{"class":105},[99,366,156],{"class":105},[99,368,369],{"class":101,"line":120},[99,370,173],{"emptyLinePlaceholder":172},[99,372,373,376,380,383],{"class":101,"line":159},[99,374,375],{"class":113},"function",[99,377,379],{"class":378},"s2Zo4"," App",[99,381,382],{"class":105},"()",[99,384,385],{"class":105}," {\n",[99,387,388,391],{"class":101,"line":169},[99,389,390],{"class":123},"  return",[99,392,393],{"class":109}," (\n",[99,395,396,398,401,403,405,407,409,411,414,417,419,421,423,426,428,431,433,435,437,439,442,445,448,451,453,455,457,459,462,464,466,468,470],{"class":101,"line":176},[99,397,284],{"class":105},[99,399,192],{"class":400},"sBMFI",[99,402,195],{"class":113},[99,404,198],{"class":105},[99,406,153],{"class":105},[99,408,203],{"class":149},[99,410,153],{"class":105},[99,412,413],{"class":113}," center",[99,415,416],{"class":105},"={",[99,418,218],{"class":130},[99,420,222],{"class":221},[99,422,134],{"class":105},[99,424,425],{"class":221}," 39.915",[99,427,231],{"class":130},[99,429,430],{"class":105},"} ",[99,432,238],{"class":113},[99,434,416],{"class":105},[99,436,245],{"class":221},[99,438,430],{"class":105},[99,440,441],{"class":113},"style",[99,443,444],{"class":105},"={{",[99,446,447],{"class":109}," width",[99,449,450],{"class":105},":",[99,452,146],{"class":105},[99,454,264],{"class":149},[99,456,153],{"class":105},[99,458,134],{"class":105},[99,460,461],{"class":109}," height",[99,463,450],{"class":105},[99,465,146],{"class":105},[99,467,264],{"class":149},[99,469,153],{"class":105},[99,471,472],{"class":105}," }}>\n",[99,474,475,478,480,483,485,487,489,491,493,495],{"class":101,"line":186},[99,476,477],{"class":105},"      \u003C",[99,479,287],{"class":400},[99,481,482],{"class":113}," lnglat",[99,484,416],{"class":105},[99,486,218],{"class":130},[99,488,222],{"class":221},[99,490,134],{"class":105},[99,492,425],{"class":221},[99,494,231],{"class":130},[99,496,497],{"class":105},"} \u002F>\n",[99,499,500,503,505],{"class":101,"line":281},[99,501,502],{"class":105},"    \u003C\u002F",[99,504,192],{"class":400},[99,506,117],{"class":105},[99,508,509,512],{"class":101,"line":314},[99,510,511],{"class":109},"  )",[99,513,156],{"class":105},[99,515,516],{"class":101,"line":324},[99,517,518],{"class":105},"}\n",[85,520,522],{"id":521},"web-components","Web Components",[90,524,528],{"className":525,"code":526,"language":527,"meta":95,"style":95},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript type=\"module\">\n  import { registerComponents } from \"@tianditu\u002Fweb-components\";\n\n  registerComponents();\n\u003C\u002Fscript>\n\n\u003Ctdt-map tk=\"你的浏览器端密钥\" center=\"116.404,39.915\" zoom=\"12\" style=\"width: 100vw; height: 100vh\">\n  \u003Ctdt-marker lnglat=\"116.404,39.915\">\u003C\u002Ftdt-marker>\n\u003C\u002Ftdt-map>\n","html",[76,529,530,550,573,577,586,594,598,650,674],{"__ignoreMap":95},[99,531,532,534,536,539,541,543,546,548],{"class":101,"line":102},[99,533,106],{"class":105},[99,535,110],{"class":109},[99,537,538],{"class":113}," type",[99,540,198],{"class":105},[99,542,153],{"class":105},[99,544,545],{"class":149},"module",[99,547,153],{"class":105},[99,549,117],{"class":105},[99,551,552,555,557,560,562,564,566,569,571],{"class":101,"line":120},[99,553,554],{"class":123},"  import",[99,556,127],{"class":105},[99,558,559],{"class":130}," registerComponents",[99,561,140],{"class":105},[99,563,143],{"class":123},[99,565,146],{"class":105},[99,567,568],{"class":149},"@tianditu\u002Fweb-components",[99,570,153],{"class":105},[99,572,156],{"class":105},[99,574,575],{"class":101,"line":159},[99,576,173],{"emptyLinePlaceholder":172},[99,578,579,582,584],{"class":101,"line":169},[99,580,581],{"class":378},"  registerComponents",[99,583,382],{"class":130},[99,585,156],{"class":105},[99,587,588,590,592],{"class":101,"line":176},[99,589,162],{"class":105},[99,591,110],{"class":109},[99,593,117],{"class":105},[99,595,596],{"class":101,"line":186},[99,597,173],{"emptyLinePlaceholder":172},[99,599,600,602,605,607,609,611,613,615,617,619,621,624,626,629,631,633,635,637,639,641,643,646,648],{"class":101,"line":281},[99,601,106],{"class":105},[99,603,604],{"class":109},"tdt-map",[99,606,195],{"class":113},[99,608,198],{"class":105},[99,610,153],{"class":105},[99,612,203],{"class":149},[99,614,153],{"class":105},[99,616,413],{"class":113},[99,618,198],{"class":105},[99,620,153],{"class":105},[99,622,623],{"class":149},"116.404,39.915",[99,625,153],{"class":105},[99,627,628],{"class":113}," zoom",[99,630,198],{"class":105},[99,632,153],{"class":105},[99,634,245],{"class":149},[99,636,153],{"class":105},[99,638,250],{"class":113},[99,640,198],{"class":105},[99,642,153],{"class":105},[99,644,645],{"class":149},"width: 100vw; height: 100vh",[99,647,153],{"class":105},[99,649,117],{"class":105},[99,651,652,654,657,659,661,663,665,667,670,672],{"class":101,"line":314},[99,653,189],{"class":105},[99,655,656],{"class":109},"tdt-marker",[99,658,482],{"class":113},[99,660,198],{"class":105},[99,662,153],{"class":105},[99,664,623],{"class":149},[99,666,153],{"class":105},[99,668,669],{"class":105},">\u003C\u002F",[99,671,656],{"class":109},[99,673,117],{"class":105},[99,675,676,678,680],{"class":101,"line":324},[99,677,162],{"class":105},[99,679,604],{"class":109},[99,681,117],{"class":105},[85,683,684],{"id":684},"实测",[73,686,687],{},"在下方输入浏览器端密钥即可渲染地图，密钥只保存在当前浏览器：",[689,690,691],"demo-map",{},[656,692],{":lnglat":693,"title":694},"[116.428, 39.916]","故宫",[441,696,697],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":95,"searchDepth":120,"depth":120,"links":699},[700,701,702,703],{"id":87,"depth":120,"text":88},{"id":333,"depth":120,"text":334},{"id":521,"depth":120,"text":522},{"id":684,"depth":120,"text":684},"用 Vue、React 与 Web Components 分别渲染一张地图","md",null,{},{"title":19,"description":704},"YHT51HmzTd5jwB1ZMKQf3oRFRxESjJOZZGDEkl1sX64",[711,713],{"title":15,"path":16,"stem":17,"description":712,"children":-1},"浏览器端密钥（tk）的申请与在本站的使用",{"title":30,"path":31,"stem":32,"description":714,"children":-1},"TdtMap 地图容器：props、事件与命令式访问",1792390839640]