是否可以在 Blazor 中使用 Bing 或 Google Maps API？

Question

我正在嘗試啟動並運行地圖 API，並努力使 Blazor 與 Js 函數配合使用。 有沒有人有 Bing 或 Google 地圖在 Blazor 中工作的例子，我可以看看？

我已經嘗試使用 Microsoft 的 Blazor JSInterop 文檔中描述的方法引用存儲在 wwwroot.index.html 文件中的腳本，但大多都失敗了。

索引.html：

<body>
    <app>Loading...</app>
    <script type='text/javascript'>
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
            var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
            map.entities.push(pushpin);
            return "";
        }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=###&callback=loadMapScenario' async defer></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

blazor 頁面：

@page "/"
@inject IJSRuntime JSRuntime

<h1>Hello, world!</h1>

Welcome to your new app.

<div id='myMap' style='width: 400px; height: 300px;'></div>

@functions {
    protected override async Task OnInitAsync()
    {
        var text = await JSRuntime.InvokeAsync<string>("loadMapScenario");
    }
}

頁面加載，但地圖不加載。

Answer 1

您正在 OnInitAsync 方法中調用地圖腳本，但此時頁面尚未呈現。 呈現頁面后，嘗試在 OnAfterRenderAsync 方法中調用它。

protected override async Task OnAfterRenderAsync()
{
    var text = await JSRuntime.InvokeAsync<string>("loadMapScenario");
}

還重新排序您的 javascript 包括

  <script src="_framework/blazor.webassembly.js"></script>

  <script type='text/javascript'>

    function loadMapScenario() {
        debugger;
        var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);
        return "";
    }

</script>


<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=###&callback=loadMapScenario' async defer></script>

是否可以在 Blazor 中使用 Bing 或 Google Maps API？

問題描述

1 個解決方案

解決方案1
4 已采納 2019-05-02 19:19:43

是否可以在 Blazor 中使用 Bing 或 Google Maps API？

問題描述

1 個解決方案

解決方案1 4 已采納 2019-05-02 19:19:43

解決方案1
4 已采納 2019-05-02 19:19:43