将 bing 地图页面加载到 Chromium 浏览器（在 Delphi 中）答案

【问题标题】：loading bing maps page into Chromium browser (in Delphi)将 bing 地图页面加载到 Chromium 浏览器（在 Delphi 中）
【发布时间】：2017-08-25 19:19:09
【问题描述】：

此代码创建一个 HTML 页面，该页面加载特定地址的 bing 地图（由程序传递），然后将该页面加载到 Chromium 浏览器中。我已经测试了它生成的 HTML 文件，如果我双击该文件，我的默认浏览器会打开并且页面会正确加载。但是，当我尝试将此页面加载到程序中的 Chromium 浏览器窗口中（过去曾用于其他页面）时，仅显示标题（来自 div id="TitleDiv" 的材料）但地图从不显示。我试图弄清楚为什么 HTML 在手动加载时正确加载时以编程方式加载到浏览器中时没有加载。

我已经尝试过使用和不使用 ChromWebPage.Browser.Reload; 行。

这是我的 Delphi 代码，只是我在这里省略了 Bing 地图键。（我知道使用 Delphi 获取文本文件的最简单方法是使用 TStringList ，这就是代码被格式化为这样的原因。）

  mMap := TStringList.Create;
  with mMap do begin
    Add('<!DOCTYPE html> ' );
    Add('<html> ' );
    Add('<head>');
    Add('<title>' + sCaption + '</title> ');
    Add('    <meta charset="utf-8" /> ');
    Add('    <script type="text/javascript"> ');
    Add('    var map, searchManager; ');
    Add('    function GetMap() { ');
    Add('        map = new Microsoft.Maps.Map("#myMap", { ');
    Add('            credentials: "KEY-HERE" ');
    Add('        }); ');
    //Make a request to geocode passed address
    Add('        geocodeQuery("' + sAddress + '"); ');
    Add('    } ');
    Add('    function geocodeQuery(query) { ');
    //If search manager is not defined, load the search module.
    Add('        if (!searchManager) { ');
    // Create an instance of the search manager and call the geocodeQuery function again.
    Add('            Microsoft.Maps.loadModule("Microsoft.Maps.Search", function () { ');
    Add('                searchManager = new Microsoft.Maps.Search.SearchManager(map); ');
    Add('                geocodeQuery(query); ');
    Add('            }); ');
    Add('        } else { ');
    Add('            var searchRequest = { ');
    Add('                where: query, ');
    Add('                callback: function (r) { ');
    // Add the first result to the map and zoom into it.
    Add('                    if (r && r.results && r.results.length > 0) { ');
    Add('                        var pin = new Microsoft.Maps.Pushpin(r.results[0].location); ');
    Add('                        map.entities.push(pin); ');
    Add('                        map.setView({ bounds: r.results[0].bestView }); ');
    Add('                    } ');
    Add('                }, ');
    Add('                errorCallback: function (e) { ');
    // If there is an error, alert the user about it.
    Add('                    alert("No results found."); ');
    Add('                } ');
    Add('            }; ');
    //Make the geocode request.
    Add('            searchManager.geocode(searchRequest); ');
    Add('        } ');
    Add('    } ');
    Add('    </script> ');
    Add('    <script type="text/javascript" src="/BingMapsCredentials.js"></script> ');
    Add('    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=GetMap" async defer></script> ');
    Add('</head> ');
    Add('<body style="width:100%;height:100%"> ');
    Add('    <div id="TitleDiv" style="padding-bottom: 15px; ');
    Add('                             padding-top: 5px; ');
    Add('                             font-family: Arial, Helvetica, sans-serif; ');
    Add('                             font-size:   14px; ');
    Add('                              font-weight: bold; ');
    Add('                             position:relative;">' + sCaption + '</div> ');
    Add('    <div id="myMap" style="width:100vw;height:95vh;position:relative;"></div> ');
    Add('</body> ');
    Add('</html> ');
    sTempFile := GetLocalAppDir + 'mymap.html';
    if fileExists(sTempFile) then DeleteFile(sTempFile);
    savetofile(sTempFile);
    mMap.free;
  end;
  ChromWebPage.DefaultUrl := sTempFile;
  ChromWebPage.Browser.MainFrame.LoadUrl(sTempFile);
  ChromWebPage.Browser.Reload;

【问题讨论】：

标签： bing-maps chromium

【解决方案1】：

升级到最新版本的 DCEF3 解决了这个问题。怀疑脚本与旧版 DCEF3 不兼容。

【讨论】：