google-maps-api-3 - 在 Blazor 上启动 Google map

Question

我正在尝试使用 JSInterop 在我的服务器端 Blazor 应用程序上启动 Google map 。我似乎已经尝试了几乎所有方法，但无法显示 map 。不幸的是，互联网上几乎没有关于它的样本，因为它是一个相当新的框架，而且我自己也同样刚刚开始接触 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项目。我只改变两件事。 一 是将高度从百分比更改为像素( for percentage height HTML 5 )和 另一个 正在调用 initialize Showgooglemap 的函数因为initialize函数已在 page load 上初始化您的 map 或 first render .完整的代码如下，试试这些...

_Host.cshtml file,

<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 component,

@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();
        }

    }
}

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