在 Blazor 上启动 Google 地图

Question

我正在尝试使用 JSInterop 在我的服务器端 Blazor 应用程序上启动 Google 地图。我似乎已经尝试了几乎所有方法，但无法显示地图。不幸的是，互联网上几乎没有关于它的样本，因为它是一个相当新的框架，而且我自己也同样刚刚开始接触 Blazor，所以我可能做错了很多事情。任何朝着正确方向的推动将不胜感激。

在我的组件文件中，我有：

@page "/MapTest"
@inject IJSRuntime JSRuntime

<style>
    #map {
        width: 60%;
        height: 60%;
    }
</style>

<h1>Display Google Map</h1>


<div @ref="map" id="map"></div>

@code {

    ElementReference map; // reference to the DIV

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
        //StateHasChanged();

    }
}

在我的 _Host.cshtml 文件中，我有：

   <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&v=3"></script>

    <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(40.716948, -74.003563);
                var options = {
                    zoom: 14, center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById
                    ("map"), options);
        }
            //google.maps.event.addDomListener(window, 'load', initialize);

//i tried wrapping the call in a function to see if it helps
        function Showgooglemap() {
            google.maps.event.addDomListener(window, 'load', initialize);
        }
      </script>

Answer 1

欢迎@flylily，你快完成了。我在我的示例Blazor-server-side项目中运行您的代码。我只改变两件事。一个是从百分比像素（高度变化的百分比高度HTML 5）和另一种是调用initialize的函数insteedShowgooglemap具有因initialize功能上已经初始化地图page load或first render。完整的代码如下，试试这些......

_Host.cshtml 文件，

<script src="_framework/blazor.server.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{put-your-api-key}}&v=3"></script>
<script>
    function initialize() {
        var latlng = new google.maps.LatLng(40.716948, -74.003563);
        var options = {
            zoom: 14, center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById
            ("map"), options);
    }   
</script>

MapTest.razor 组件，

@page "/MapTest"
@inject IJSRuntime JSRuntime

<h1>Display Google Map</h1>
<div id="map" style="height:500px;width:100%;">
</div>

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initialize", null);
            StateHasChanged();
        }

    }
}

最后，运行您的应用程序并享受。