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

    }
}

最后，运行您的申请并享受。

Answer 2

您可以使用 this Nuget package。它将使您的 Blazor 应用程序完全控制 Google 静态和 JavaScript 地图 API。用法可能很复杂，因此建议阅读 documentation for more details and check the demo app.

其他Nuget package can help you access Browsers Geolocation services as well. See Geo JS docs as well as demo app.

Answer 3

您也可以使用 rungwiroon 中的软件包 BlazorGoogleMaps。支持

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

并在 Github and NuGet 上可用。

我正在使用它，效果非常好。

在 Blazor 上启动 Google 个地图

Launch Google Maps On Blazor

google-maps-api-3

blazor-server-side