请教，如何使用delphi EdgeBrowser调用天地图API，网上列子是多，但都无法编译通过。API的秘匙我有了。
请指点迷津，提供关键代码的详细说明。
HTML 和 Javscript 天地图官网给出源码了，但是我不知道这么使用它。
特别是如何调用HTML 和 Javscript 。
这2个文件最好采用外部调用方式，我不想把HTML 和 Javscript程序写在delphi var 哪里。
首先，你需要使用Delphi的TWebBrowser组件以及相应的WebBrowserEvents组件来加载和操作HTML页面。
在Delphi中，你可以通过使用TWebBrowser组件中的"Navigate"方法来加载天地图API的HTML页面，如下所示：
WebBrowser1.Navigate('file://c:/天地图API的HTML文件路径/天地图API.html');
在加载HTML页面之后，你可以通过使用TWebBrowser组件中的"Document"属性来获取HTML页面中的DOM元素，如下所示：
var
Element: OleVariant;
begin
Element := WebBrowser1.Document.getElementById('element-id');
if not VarIsNull(Element) then
begin
// 对DOM元素进行操作
end;
end;
需要注意的是，在进行操作之前，你需要等待页面完全加载完成。你可以通过捕获WebBrowserEvents组件中的"OnDocumentComplete"事件来确定页面是否已经加载完成，如下所示：
procedure TForm1.WebBrowser1DocumentComplete(ASender: TObject;
const pDisp: IDispatch; var URL: OleVariant);
begin
// 页面已经加载完成
end;
对于如何使用天地图API的JavaScript进行操作，你可以通过在Delphi中进行外部调用来实现。你可以使用TWebBrowser组件中的"Document"属性获取页面中嵌入的JavaScript代码，并在Delphi代码中执行它，如下所示：
var
Script: OleVariant;
begin
Script := WebBrowser1.Document.parentWindow.execScript('javascript-code');
end;
在这里，"javascript-code"是你要执行的JavaScript代码。
最后，你可以在JavaScript代码中调用API并传入API的秘钥，如下所示：
<script type="text/javascript">
var map = new T.Map("mapDiv");
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 18);
map.addControl(new T.Control.Scale());
map.addControl(new T.Control.Zoom());
map.addControl(new T.Control.LayerSwitcher());
map.addOverLay(new T.Marker(new T.LngLat(116.40769, 39.89945)));
var url = "http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";
var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
var tileLayer = new T.TileLayer(url, {subdomains: subdomains});
map.addLayer(tileLayer);
tileLayer.getTilesUrl=function(){
var curMap = map.getZoom();
if(curMap<=10){
url = "http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";
return url;
}
else if(curMap>10&&curMap<=14){
url = "http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}";
return url;
}
else{
url = "http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}";
return url;
}
}
tileLayer.getTileUrl=function(){
var curMap = map.getZoom();
if(curMap<=10){
url = "http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";
return url;
}
else if(curMap>10&&curMap<=14){
url = "http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}";
return url;
}
else{
url = "http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}";
return url;
}
}
tileLayer.preload=function(){
tileLayer._preLoadTiles();
};
</script>
在这里，你可以将秘钥传入API的请求中，如下所示：
var url = "http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=Your-key";
首先，需要在Delphi中添加EdgeBrowser控件。可以使用TWebBrowser或TChromium控件，或者使用第三方控件。
接下来，需要在Delphi中编写调用天地图API的代码。可以通过调用JavaScript代码来实现。
假设你已经有了天地图API的秘钥，并且已经编写好了HTML和JavaScript代码。以下是Delphi代码示例：
procedure TForm1.FormCreate(Sender: TObject);
begin
//设置EdgeBrowser控件的Options，以允许JavaScript代码的执行
WebBrowser1.Options.ScriptingEnabled := True;
//加载HTML文件
WebBrowser1.Navigate('file:///C:/path/to/your/html/file.html');
end;
procedure TForm1.WebBrowser1DocumentCompleted(Sender: TObject; const pDisp: IDispatch; const URL: OleVariant);
var
script: IHTMLScriptElement;
jsCode: WideString;
begin
//执行JavaScript代码
jsCode := 'var token = "your_token_here";' + #13#10 +
'var map = new T.Map("map");' + #13#10 +
'map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 15);' + #13#10 +
'var layer = new T.TileLayer({"urlTemplate":"http://t{0-7}.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={z}&token="+token});' + #13#10 +
'map.addLayer(layer);';
script := (WebBrowser1.Document as IHTMLDocument2).createElement('script') as IHTMLScriptElement;
script.text := jsCode;
(WebBrowser1.Document as IHTMLDocument2).getElementsByTagName('head').item(0).appendChild(script as IHTMLDOMNode);
end;
以上代码假设天地图API的HTML文件位于本地磁盘上的C:/path/to/your/html/file.html文件中，并且其中包含了调用天地图API的JavaScript代码。
在WebBrowser1DocumentCompleted方法中，使用JavaScript代码创建了一个T.Map对象，并向其中添加了一个T.TileLayer图层。T.TileLayer的"URLTemplate"属性指向了天地图API的服务地址，并在URL中包含了秘钥，以便进行身份验证。在这个示例中，秘钥直接硬编码在JavaScript代码中，但更好的方式是使用Delphi代码将秘钥传递给JavaScript代码。
需要注意的是，天地图API的服务地址可能会发生变化，因此需要及时更新"URLTemplate"属性中的URL。此外，不同类型的地图服务对应的URL也可能不同，需要根据实际情况进行调整。
希望这个示例能帮助你成功调用天地图API。
如果有帮助，点个采纳，感谢
这里面是两个问题：
1、delphi 调用 EdgeBrowser，这一步你应该没问题吧？
2、天地图API调用。这是纯前端的问题，你可以单独写个html用系统内置浏览器打开测试。
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://ditu.zjzwfw.gov.cn/docs/vectormap/js/leaflet/CustomWebSDK.min.js"></script>
将这两个文件引入index.html中就可以了
还要就是在引入function init(){}时，官网是没有将token拼接在引入地址后面的，我们在引入的时候要在https://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017hou拼接上 &token='你的token'。
基于new bing部分指引作答：
使用Delphi中的EdgeBrowser组件调用天地图API可以实现在Delphi应用程序中显示天地图的功能。您可以通过以下步骤进行操作：
1、创建一个新的Delphi应用程序项目。
2、在设计时，将TEdgeBrowser组件放置在窗体上。您可以在"Component Palette"中的"Samples"选项卡中找到TEdgeBrowser组件。
3、在代码编辑器中，添加System.Win.ComObj单元，以便使用COM对象。
4、在窗体的OnCreate事件中，通过以下代码创建并加载天地图的HTML页面：
uses
System.Win.ComObj;
procedure TForm1.FormCreate(Sender: TObject);
var
Document: OleVariant;
HTML: OleVariant;
begin
EdgeBrowser1.Navigate('about:blank'); // 加载空白页面
// 获取HTML文档对象
Document := EdgeBrowser1.DefaultInterface.Document;
// 创建并设置HTML内容
HTML := VarArrayCreate([0, 0], varVariant);
HTML[0] := '<html><head><script src="https://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script></head><body></body></html>';
Document.Write(HTML);
// 加载HTML内容
Document.Close;
end;
5、请确保将代码中的您的密钥替换为您在天地图API网站上获得的实际密钥。
然后，您可以通过执行JavaScript代码与天地图API进行交互。例如，以下代码在Delphi中调用JavaScript函数以显示地图：
procedure TForm1.FormCreate(Sender: TObject);
var
Document: OleVariant;
HTML: OleVariant;
begin
// ...
// 加载天地图的HTML页面
// ...
// 调用JavaScript函数显示地图
Document := EdgeBrowser1.DefaultInterface.Document;
Document.parentWindow.execScript('showMap()', 'JavaScript');
end;
这里的showMap()是您在天地图API提供的JavaScript代码中定义的函数。
通过这种方式，您可以在Delphi应用程序中使用Delphi EdgeBrowser组件调用天地图API，并在HTML和JavaScript中编写和调用相关功能。
天地图里有教程的啊
头部分：
<head>
<title>天地图三维服务接入</title>
<!cesium版本：1.58>
<script src="/Cesium-1.83/Build/CesiumUnminified/Cesium.js"></script>
<!cesium扩展插件>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<!cesium样式文件>
<link rel="stylesheet" type="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" />
<style>
略
</style>
JS主程序部分：
<script>
var token = '我的秘匙';
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
// cesium 初始化
var viewer = new Cesium.Map('cesiumContainer', {
shouldAnimate: true,
selectionIndicator:true,
infoBox:false
});
// 叠加影像服务
var imgMap = new Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme : new Cesium.WebMercatorTilingScheme(),
maximumLevel : 18
});
viewer.imageryLayers.addImageryProvider(imgMap);
// 叠加国界服务
var iboMap = new Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme : new Cesium.WebMercatorTilingScheme(),
maximumLevel : 10
});
viewer.imageryLayers.addImageryProvider(iboMap);
// 叠加地形服务
var terrainUrls = new Array();
for (var i = 0; i < subdomains.length; i++){
var url = tdtUrl.replace('{s}', subdomains[i]) + 'DataServer?T=elv_c&tk=' + token;
terrainUrls.push(url);
}
var provider = new Cesium.GeoTerrainProvider({
urls: terrainUrls
});
viewer.terrainProvider = provider;
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
// 叠加三维地名服务
var wtfs = new Cesium.GeoWTFS({
viewer,
subdomains:subdomains,
metadata:{
boundBox: {
minX: -180,
minY: -90,
maxX: 180,
maxY: 90
},
minLevel: 1,
maxLevel: 20
},
aotuCollide: true, //是否开启避让
collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
serverFirstStyle: true, //服务端样式优先
labelGraphics: {
font:"28px sans-serif",
fontSize: 28,
fillColor:Cesium.Color.WHITE,
scale: 0.5,
outlineColor:Cesium.Color.BLACK,
outlineWidth: 5,
style:Cesium.LabelStyle.FILL_AND_OUTLINE,
showBackground:false,
backgroundColor:Cesium.Color.RED,
backgroundPadding:new Cesium.Cartesian2(10, 10),
horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,
verticalOrigin:Cesium.VerticalOrigin.TOP,
eyeOffset:Cesium.Cartesian3.ZERO,
pixelOffset:new Cesium.Cartesian2(0, 8)
},
billboardGraphics: {
horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
verticalOrigin:Cesium.VerticalOrigin.CENTER,
eyeOffset:Cesium.Cartesian3.ZERO,
pixelOffset:Cesium.Cartesian2.ZERO,
alignedAxis:Cesium.Cartesian3.ZERO,
color:Cesium.Color.WHITE,
rotation:0,
scale:1,
width:18,
height:18
}
});
//三维地名服务，使用wtfs服务
wtfs.getTileUrl = function(){
return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;
}
wtfs.getIcoUrl = function(){
return tdtUrl + 'mapservice/GetIcon?id={id}&tk='+ token;
}
wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);
</script>
<div id="cesiumContainer">
</div>