[{"data":1,"prerenderedAt":1066},["ShallowReactive",2],{"navigation_docs":3,"-components-map":67,"-components-map-surround":1061},[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":30,"body":69,"description":1055,"extension":1056,"links":1057,"meta":1058,"navigation":171,"path":31,"seo":1059,"stem":32,"__hash__":1060},"docs\u002F02.components\u002F01.map.md",{"type":70,"value":71,"toc":1048},"minimark",[72,83,86,90,342,346,577,580,583,628,714,737,740,749,899,916,919,1026,1044],[73,74,75,79,80,82],"p",{},[76,77,78],"code",{},"\u003CTdtMap>"," 是地图容器，内部完成 SDK 加载、地图初始化与事件桥接。所有覆盖物、控件、工具、图层组件写在 ",[76,81,78],{}," 内部即自动挂载。",[84,85],"demo-map",{},[87,88,89],"h2",{"id":89},"基本用法",[91,92,93,259],"demo-tabs",{},[94,95,101],"pre",{"className":96,"code":97,"filename":98,"language":99,"meta":100,"style":100},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { TdtMap } from \"@tianditu\u002Fvue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTdtMap tk=\"你的浏览器端密钥\" :center=\"[116.404, 39.915]\" :zoom=\"12\" \u002F>\n\u003C\u002Ftemplate>\n","Vue","vue","",[76,102,103,123,156,166,173,183,250],{"__ignoreMap":100},[104,105,108,112,116,120],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"sMK4o","\u003C",[104,113,115],{"class":114},"swJcz","script",[104,117,119],{"class":118},"spNyl"," setup",[104,121,122],{"class":110},">\n",[104,124,126,130,133,137,140,143,146,150,153],{"class":106,"line":125},2,[104,127,129],{"class":128},"s7zQu","import",[104,131,132],{"class":110}," {",[104,134,136],{"class":135},"sTEyZ"," TdtMap",[104,138,139],{"class":110}," }",[104,141,142],{"class":128}," from",[104,144,145],{"class":110}," \"",[104,147,149],{"class":148},"sfazB","@tianditu\u002Fvue",[104,151,152],{"class":110},"\"",[104,154,155],{"class":110},";\n",[104,157,159,162,164],{"class":106,"line":158},3,[104,160,161],{"class":110},"\u003C\u002F",[104,163,115],{"class":114},[104,165,122],{"class":110},[104,167,169],{"class":106,"line":168},4,[104,170,172],{"emptyLinePlaceholder":171},true,"\n",[104,174,176,178,181],{"class":106,"line":175},5,[104,177,111],{"class":110},[104,179,180],{"class":114},"template",[104,182,122],{"class":110},[104,184,186,189,192,195,198,200,203,205,208,211,213,215,218,222,225,228,231,233,235,238,240,242,245,247],{"class":106,"line":185},6,[104,187,188],{"class":110},"  \u003C",[104,190,191],{"class":114},"TdtMap",[104,193,194],{"class":118}," tk",[104,196,197],{"class":110},"=",[104,199,152],{"class":110},[104,201,202],{"class":148},"你的浏览器端密钥",[104,204,152],{"class":110},[104,206,207],{"class":110}," :",[104,209,210],{"class":118},"center",[104,212,197],{"class":110},[104,214,152],{"class":110},[104,216,217],{"class":110},"[",[104,219,221],{"class":220},"sbssI","116.404",[104,223,224],{"class":110},", ",[104,226,227],{"class":220},"39.915",[104,229,230],{"class":110},"]",[104,232,152],{"class":110},[104,234,207],{"class":110},[104,236,237],{"class":118},"zoom",[104,239,197],{"class":110},[104,241,152],{"class":110},[104,243,244],{"class":220},"12",[104,246,152],{"class":110},[104,248,249],{"class":110}," \u002F>\n",[104,251,253,255,257],{"class":106,"line":252},7,[104,254,161],{"class":110},[104,256,180],{"class":114},[104,258,122],{"class":110},[94,260,265],{"className":261,"code":262,"filename":263,"language":264,"meta":100,"style":100},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctdt-map\n  tk=\"你的浏览器端密钥\"\n  center=\"116.404,39.915\"\n  zoom=\"12\"\n  style=\"width: 100vw; height: 100vh\"\n>\n\u003C\u002Ftdt-map>\n","Web Components","html",[76,266,267,274,288,302,315,329,333],{"__ignoreMap":100},[104,268,269,271],{"class":106,"line":107},[104,270,111],{"class":110},[104,272,273],{"class":114},"tdt-map\n",[104,275,276,279,281,283,285],{"class":106,"line":125},[104,277,278],{"class":118},"  tk",[104,280,197],{"class":110},[104,282,152],{"class":110},[104,284,202],{"class":148},[104,286,287],{"class":110},"\"\n",[104,289,290,293,295,297,300],{"class":106,"line":158},[104,291,292],{"class":118},"  center",[104,294,197],{"class":110},[104,296,152],{"class":110},[104,298,299],{"class":148},"116.404,39.915",[104,301,287],{"class":110},[104,303,304,307,309,311,313],{"class":106,"line":168},[104,305,306],{"class":118},"  zoom",[104,308,197],{"class":110},[104,310,152],{"class":110},[104,312,244],{"class":148},[104,314,287],{"class":110},[104,316,317,320,322,324,327],{"class":106,"line":175},[104,318,319],{"class":118},"  style",[104,321,197],{"class":110},[104,323,152],{"class":110},[104,325,326],{"class":148},"width: 100vw; height: 100vh",[104,328,287],{"class":110},[104,330,331],{"class":106,"line":185},[104,332,122],{"class":110},[104,334,335,337,340],{"class":106,"line":252},[104,336,161],{"class":110},[104,338,339],{"class":114},"tdt-map",[104,341,122],{"class":110},[87,343,345],{"id":344},"props","Props",[347,348,349,365],"table",{},[350,351,352],"thead",{},[353,354,355,359,362],"tr",{},[356,357,358],"th",{},"Prop",[356,360,361],{},"类型",[356,363,364],{},"说明",[366,367,368,384,401,417,435,449,464,479,493,507,521,535,549,563],"tbody",{},[353,369,370,376,381],{},[371,372,373],"td",{},[76,374,375],{},"tk",[371,377,378],{},[76,379,380],{},"string",[371,382,383],{},"浏览器端密钥，仅初始化时生效",[353,385,386,390,395],{},[371,387,388],{},[76,389,210],{},[371,391,392],{},[76,393,394],{},"[number, number]",[371,396,397,398],{},"中心点坐标，默认 ",[76,399,400],{},"[116.404, 39.915]",[353,402,403,407,412],{},[371,404,405],{},[76,406,237],{},[371,408,409],{},[76,410,411],{},"number",[371,413,414,415],{},"缩放级别，默认 ",[76,416,244],{},[353,418,419,428,432],{},[371,420,421,424,425],{},[76,422,423],{},"minZoom"," \u002F ",[76,426,427],{},"maxZoom",[371,429,430],{},[76,431,411],{},[371,433,434],{},"最小\u002F最大缩放级别",[353,436,437,442,446],{},[371,438,439],{},[76,440,441],{},"projection",[371,443,444],{},[76,445,380],{},[371,447,448],{},"地图投影，仅初始化时生效",[353,450,451,456,461],{},[371,452,453],{},[76,454,455],{},"limitBounds",[371,457,458],{},[76,459,460],{},"LngLatBounds",[371,462,463],{},"地图显示范围限制",[353,465,466,471,476],{},[371,467,468],{},[76,469,470],{},"dragging",[371,472,473],{},[76,474,475],{},"boolean",[371,477,478],{},"拖拽，默认开启",[353,480,481,486,490],{},[371,482,483],{},[76,484,485],{},"scrollWheelZoom",[371,487,488],{},[76,489,475],{},[371,491,492],{},"滚轮缩放，默认开启",[353,494,495,500,504],{},[371,496,497],{},[76,498,499],{},"doubleClickZoom",[371,501,502],{},[76,503,475],{},[371,505,506],{},"双击缩放，默认开启",[353,508,509,514,518],{},[371,510,511],{},[76,512,513],{},"keyboard",[371,515,516],{},[76,517,475],{},[371,519,520],{},"键盘操作，默认开启",[353,522,523,528,532],{},[371,524,525],{},[76,526,527],{},"inertia",[371,529,530],{},[76,531,475],{},[371,533,534],{},"拖拽惯性，默认开启",[353,536,537,542,546],{},[371,538,539],{},[76,540,541],{},"continuousZoom",[371,543,544],{},[76,545,475],{},[371,547,548],{},"连续缩放，默认开启",[353,550,551,556,560],{},[371,552,553],{},[76,554,555],{},"pinchToZoom",[371,557,558],{},[76,559,475],{},[371,561,562],{},"双指缩放，默认开启",[353,564,565,570,574],{},[371,566,567],{},[76,568,569],{},"autoResize",[371,571,572],{},[76,573,475],{},[371,575,576],{},"容器尺寸变化后自动调整",[87,578,579],{"id":579},"事件",[73,581,582],{},"以官方 Map 文档页的 14 个事件为准，原生事件名直发：",[73,584,585,588,589,588,592,588,595,588,598,588,601,588,604,588,607,588,610,588,613,588,616,588,619,588,622,588,625],{},[76,586,587],{},"click"," ",[76,590,591],{},"contextmenu",[76,593,594],{},"mouseover",[76,596,597],{},"movestart",[76,599,600],{},"moveend",[76,602,603],{},"zoomend",[76,605,606],{},"removeoverlay",[76,608,609],{},"removecontrol",[76,611,612],{},"dragstart",[76,614,615],{},"dragend",[76,617,618],{},"layerremove",[76,620,621],{},"resize",[76,623,624],{},"touchstart",[76,626,627],{},"touchend",[94,629,631],{"className":96,"code":630,"language":99,"meta":100,"style":100},"\u003Ctemplate>\n  \u003CTdtMap tk=\"…\" @click=\"(e) => console.log(e.lnglat)\" \u002F>\n\u003C\u002Ftemplate>\n",[76,632,633,641,706],{"__ignoreMap":100},[104,634,635,637,639],{"class":106,"line":107},[104,636,111],{"class":110},[104,638,180],{"class":114},[104,640,122],{"class":110},[104,642,643,645,647,649,651,653,656,658,661,663,665,667,670,674,677,680,683,686,690,692,694,696,699,702,704],{"class":106,"line":125},[104,644,188],{"class":110},[104,646,191],{"class":114},[104,648,194],{"class":118},[104,650,197],{"class":110},[104,652,152],{"class":110},[104,654,655],{"class":148},"…",[104,657,152],{"class":110},[104,659,660],{"class":110}," @",[104,662,587],{"class":118},[104,664,197],{"class":110},[104,666,152],{"class":110},[104,668,669],{"class":110},"(",[104,671,673],{"class":672},"sHdIc","e",[104,675,676],{"class":110},") ",[104,678,679],{"class":118},"=>",[104,681,682],{"class":135}," console",[104,684,685],{"class":110},".",[104,687,689],{"class":688},"s2Zo4","log",[104,691,669],{"class":110},[104,693,673],{"class":135},[104,695,685],{"class":110},[104,697,698],{"class":135},"lnglat",[104,700,701],{"class":110},")",[104,703,152],{"class":110},[104,705,249],{"class":110},[104,707,708,710,712],{"class":106,"line":158},[104,709,161],{"class":110},[104,711,180],{"class":114},[104,713,122],{"class":110},[715,716,717,718,721,722,721,725,728,729,732,733,736],"note",{},"上表之外的地图事件（如 ",[76,719,720],{},"mousemove","、",[76,723,724],{},"dblclick",[76,726,727],{},"zoomstart","）不经模板直发，需要时用 ",[76,730,731],{},"useMap"," 拿到实例后 ",[76,734,735],{},"map.addEventListener"," 命令式挂接。",[87,738,739],{"id":739},"命令式访问",[73,741,742,745,746,748],{},[76,743,744],{},"useMap()"," 在 ",[76,747,78],{}," 内部提供地图实例的响应式引用：",[94,750,752],{"className":96,"code":751,"language":99,"meta":100,"style":100},"\u003Cscript setup>\nimport { useMap } from \"@tianditu\u002Fvue\";\n\nconst { map, ready } = useMap();\n\nfunction flyTo() {\n  map.value?.centerAndZoom(new T.LngLat(116.404, 39.915), 14);\n}\n\u003C\u002Fscript>\n",[76,753,754,764,785,789,818,822,835,884,890],{"__ignoreMap":100},[104,755,756,758,760,762],{"class":106,"line":107},[104,757,111],{"class":110},[104,759,115],{"class":114},[104,761,119],{"class":118},[104,763,122],{"class":110},[104,765,766,768,770,773,775,777,779,781,783],{"class":106,"line":125},[104,767,129],{"class":128},[104,769,132],{"class":110},[104,771,772],{"class":135}," useMap",[104,774,139],{"class":110},[104,776,142],{"class":128},[104,778,145],{"class":110},[104,780,149],{"class":148},[104,782,152],{"class":110},[104,784,155],{"class":110},[104,786,787],{"class":106,"line":158},[104,788,172],{"emptyLinePlaceholder":171},[104,790,791,794,796,799,802,805,808,811,813,816],{"class":106,"line":168},[104,792,793],{"class":118},"const",[104,795,132],{"class":110},[104,797,798],{"class":135}," map",[104,800,801],{"class":110},",",[104,803,804],{"class":135}," ready ",[104,806,807],{"class":110},"}",[104,809,810],{"class":110}," =",[104,812,772],{"class":688},[104,814,815],{"class":135},"()",[104,817,155],{"class":110},[104,819,820],{"class":106,"line":175},[104,821,172],{"emptyLinePlaceholder":171},[104,823,824,827,830,832],{"class":106,"line":185},[104,825,826],{"class":118},"function",[104,828,829],{"class":688}," flyTo",[104,831,815],{"class":110},[104,833,834],{"class":110}," {\n",[104,836,837,840,842,845,848,851,853,856,859,861,864,866,868,870,873,875,877,880,882],{"class":106,"line":252},[104,838,839],{"class":135},"  map",[104,841,685],{"class":110},[104,843,844],{"class":135},"value",[104,846,847],{"class":110},"?.",[104,849,850],{"class":688},"centerAndZoom",[104,852,669],{"class":114},[104,854,855],{"class":110},"new",[104,857,858],{"class":135}," T",[104,860,685],{"class":110},[104,862,863],{"class":688},"LngLat",[104,865,669],{"class":114},[104,867,221],{"class":220},[104,869,801],{"class":110},[104,871,872],{"class":220}," 39.915",[104,874,701],{"class":114},[104,876,801],{"class":110},[104,878,879],{"class":220}," 14",[104,881,701],{"class":114},[104,883,155],{"class":110},[104,885,887],{"class":106,"line":886},8,[104,888,889],{"class":110},"}\n",[104,891,893,895,897],{"class":106,"line":892},9,[104,894,161],{"class":110},[104,896,115],{"class":114},[104,898,122],{"class":110},[73,900,901,902,905,906,721,909,721,912,915],{},"模板引用同样可用：",[76,903,904],{},"\u003CTdtMap ref=\"mapRef\">"," 的实例上 expose 了 ",[76,907,908],{},"map",[76,910,911],{},"session",[76,913,914],{},"ready","。",[87,917,263],{"id":918},"web-components",[91,920,921,976],{},[94,922,924],{"className":96,"code":923,"filename":98,"language":99,"meta":100,"style":100},"\u003CTdtMap tk=\"你的浏览器端密钥\" :center=\"[116.404, 39.915]\" :zoom=\"12\" \u002F>\n",[76,925,926],{"__ignoreMap":100},[104,927,928,930,932,934,936,938,940,942,944,946,948,950,952,954,956,958,960,962,964,966,968,970,972,974],{"class":106,"line":107},[104,929,111],{"class":110},[104,931,191],{"class":114},[104,933,194],{"class":118},[104,935,197],{"class":110},[104,937,152],{"class":110},[104,939,202],{"class":148},[104,941,152],{"class":110},[104,943,207],{"class":110},[104,945,210],{"class":118},[104,947,197],{"class":110},[104,949,152],{"class":110},[104,951,217],{"class":135},[104,953,221],{"class":220},[104,955,801],{"class":110},[104,957,872],{"class":220},[104,959,230],{"class":135},[104,961,152],{"class":110},[104,963,207],{"class":110},[104,965,237],{"class":118},[104,967,197],{"class":110},[104,969,152],{"class":110},[104,971,244],{"class":220},[104,973,152],{"class":110},[104,975,249],{"class":110},[94,977,979],{"className":261,"code":978,"filename":263,"language":264,"meta":100,"style":100},"\u003Ctdt-map tk=\"你的浏览器端密钥\" center=\"116.404,39.915\" zoom=\"12\">\u003C\u002Ftdt-map>\n",[76,980,981],{"__ignoreMap":100},[104,982,983,985,987,989,991,993,995,997,1000,1002,1004,1006,1008,1011,1013,1015,1017,1019,1022,1024],{"class":106,"line":107},[104,984,111],{"class":110},[104,986,339],{"class":114},[104,988,194],{"class":118},[104,990,197],{"class":110},[104,992,152],{"class":110},[104,994,202],{"class":148},[104,996,152],{"class":110},[104,998,999],{"class":118}," center",[104,1001,197],{"class":110},[104,1003,152],{"class":110},[104,1005,299],{"class":148},[104,1007,152],{"class":110},[104,1009,1010],{"class":118}," zoom",[104,1012,197],{"class":110},[104,1014,152],{"class":110},[104,1016,244],{"class":148},[104,1018,152],{"class":110},[104,1020,1021],{"class":110},">\u003C\u002F",[104,1023,339],{"class":114},[104,1025,122],{"class":110},[73,1027,1028,1029,1032,1033,721,1036,1039,1040,1043],{},"事件以 ",[76,1030,1031],{},"tdt-"," 前缀派发：",[76,1034,1035],{},"tdt-click",[76,1037,1038],{},"tdt-zoomend"," 等，",[76,1041,1042],{},"event.detail"," 为原生事件对象。",[1045,1046,1047],"style",{},"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 .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":100,"searchDepth":125,"depth":125,"links":1049},[1050,1051,1052,1053,1054],{"id":89,"depth":125,"text":89},{"id":344,"depth":125,"text":345},{"id":579,"depth":125,"text":579},{"id":739,"depth":125,"text":739},{"id":918,"depth":125,"text":263},"TdtMap 地图容器：props、事件与命令式访问","md",null,{},{"title":30,"description":1055},"g5xduXihGzhhDf7n3Sc4Tu1v4_rJVYJZm6FaJP8fsII",[1062,1064],{"title":19,"path":20,"stem":21,"description":1063,"children":-1},"用 Vue 与 Web Components 分别渲染一张地图",{"title":34,"path":35,"stem":36,"description":1065,"children":-1},"标注、折线、多边形、圆形、矩形、文本、点聚合、海量点、信息窗与右键菜单",1788745402605]