在 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 项目中运行您的代码。我只改变两件事。 一个是将高度从百分比更改为像素（for percentage height HTML 5），另一个是调用initialize函数而不是Showgooglemap，因为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();
        }

    }
}

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

Answer 2

您可以使用this Nuget package。它还可以让您的 Blazor 应用完全控制 Google Static 和 JavaScript Maps API。 用法可能很复杂，因此建议阅读documentation了解更多详细信息并查看demo app。

其他Nuget package 也可以帮助您访问浏览器地理定位服务。请参阅 Geo JS docs 和 demo app。

Answer 3

您也可以使用来自rungwiroon 的包BlazorGoogleMaps。支持

• 地图
• 标记
• 符号
• 信息窗口
• 多边形、线串、矩形、圆形
• 路线
• 坐标
• 界限
• 样式

在Github 和NuGet 上可用。

我正在使用它，效果很好。