如何在 blazor 上显示地图 (1)

📌 相关文章

📜 如何在 blazor 上显示地图 (1)

📅 最后修改于: 2023-12-03 14:52:14.045000 🧑 作者: Mango

如何在Blazor上显示地图

如果你要在Blazor应用程序中显示地图，你需要使用第三方库或者地图服务提供商的API。在这篇文章中，我们将介绍两种在Blazor应用程序中显示地图的方法：使用开源地图库Leaflet和使用Google Maps API。

使用Leaflet库

Leaflet是一个开源的JavaScript库，它提供了易于使用和自定义的交互式地图。要在Blazor应用程序中使用Leaflet，你需要在你的Blazor项目中添加Leaflet的JavaScript和CSS文件。你可以使用NuGet包管理器添加Leaflet的.NET包，它将自动为你引入所有必要的文件。以下是在Blazor中添加Leaflet的步骤：

在Visual Studio中打开你的Blazor项目。
在解决方案资源管理器中，右键单击你的项目，然后选择“管理NuGet程序包”。
在NuGet程序包管理器中，搜索 “Leaflet” 并安装最新版本的Leaflet。
在index.html中添加Leaflet.js和Leaflet.css文件的引用，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlazorLeafletMap</title>
    <script src="_framework/blazor.webassembly.js"></script>
    <link href="_content/Leaflet/leaflet.css" rel="stylesheet" />
    <script src="_content/Leaflet/leaflet.js"></script>
</head>
<body>
    <app>Loading...</app>
    <script src="blazorLeafletMap.js"></script>
</body>
</html>

在你的Blazor页面中创建一个需要显示地图的元素，如下所示：

<div id="map" style="height:500px;"></div>

在你的Blazor页面中添加以下代码来初始化Leaflet地图：

@page "/leafletmap"
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntime

<div id="map" style="height:500px;"></div>

@code {
    private async Task InitMap()
    {
        var map = await JsRuntime.InvokeAsync<L.Map>("initmap", "map"); // initmap is a JavaScript function included in blazorLeafletMap.js
        map.SetView(new L.LatLng(30.2672, -97.7431), 10); // Set the center of the map to Austin, TX and set the initial zoom level to 10
        L.Marker marker = new L.Marker(new L.LatLng(30.2672, -97.7431)); // Create a marker at Austin, TX
        marker.BindPopup("Austin, TX").OpenPopup(); // Bind a popup to the marker that displays the location name "Austin, TX". Open the popup by default.
        map.AddLayer(marker); // Add the marker to the map
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await InitMap();
        }
    }
}

最后，你需要创建一个JavaScript文件blazorLeafletMap.js，它包含了一个名为initmap的函数，用来初始化Leaflet地图。以下是initmap函数的代码：

function initmap(mapId) {
    var map = L.map(mapId);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18
    }).addTo(map);

    return map;
}

现在你的Blazor应用程序中已经可以显示Leaflet地图了！

使用Google Maps API

如果你想使用Google地图而不是Leaflet，你可以使用Google Maps API。以下是在Blazor中使用Google Maps API的步骤：

从Google Cloud Console中获取你的API密钥。详细说明请参见：

https://developers.google.com/maps/gmp-get-started#get-the-api-keys

在index.html中添加Google Maps API的引用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlazorGoogleMaps</title>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
    <app>Loading...</app>
    <script src="blazorGoogleMaps.js"></script>
</body>
</html>

请注意将 "YOUR_API_KEY" 替换为你的API密钥。

在你的Blazor页面中创建一个需要显示地图的元素，如下所示：

<div id="googleMap" style="height:500px;"></div>

在你的Blazor页面中添加以下代码来初始化Google地图：

@page "/googlemaps"
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntime

<div id="googleMap" style="height:500px;"></div>

@code {
    private async Task InitMap()
    {
        var mapOptions = new MapOptions
        {
            Center = new LatLngLiteral { Lat = 30.2672, Lng = -97.7431 },
            Zoom = 10,
            MapTypeId = MapTypeId.Roadmap
        };
        var map = await JsRuntime.InvokeAsync<GoogleMapsMap>("initmap", "googleMap", mapOptions); // initmap is a JavaScript function included in blazorGoogleMaps.js
        var markerOptions = new MarkerOptions
        {
            Position = new LatLngLiteral { Lat = 30.2672, Lng = -97.7431 },
            Map = map,
            Title = "Austin, TX"
        };
        var marker = await map.CreateMarkerAsync(markerOptions);
        marker.SetVisible(true);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await InitMap();
        }
    }
}

请注意，需要引入对GoogleMapsMap类的名称空间，它包含了用于与Google Maps API交互的C# API。以下是GoogleMapsMap类的代码：

using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace BlazorGoogleMaps
{
    public class GoogleMapsMap
    {
        private readonly IJSRuntime _jsRuntime;

        private readonly string _id;

        public GoogleMapsMap(IJSRuntime jsRuntime, string id, MapOptions options)
        {
            _jsRuntime = jsRuntime;
            _id = id;
            InitMapAsync(options).Wait();
        }

        public async Task<Marker> CreateMarkerAsync(MarkerOptions options)
        {
            return await _jsRuntime.InvokeAsync<Marker>("createMarker", _id, options); // createMarker is a JavaScript function included in blazorGoogleMaps.js
        }

        private async Task InitMapAsync(MapOptions options)
        {
            await _jsRuntime.InvokeAsync<object>("initmap", _id, options); // initmap is a JavaScript function included in blazorGoogleMaps.js
        }
    }
}

最后，你需要创建一个JavaScript文件blazorGoogleMaps.js，它包含了一个名为initmap和createMarker的函数，用于初始化Google地图和创建标记。以下是initmap和createMarker函数的代码：

function initmap(mapId, mapOptions) {
    var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
    return map;
}

function createMarker(mapId, options) {
    return new google.maps.Marker(options);
}

现在你的Blazor应用程序中已经可以显示Google地图了！

总结

这篇文章介绍了如何在Blazor中使用Leaflet和Google Maps API显示地图。无论你选择哪个库，都可以通过简单的步骤在你的Blazor应用程序中显示地图。