在 GitHub Blazor Server上测试应用程序,我将OpenStreetMap与Leaflet集成以显示两个坐标之间的地图和路线。
我希望地图和路线说明以所选语言显示(例如,用于法语测试),但我遇到了问题:
尽管使用了法语图块,但界面的某些部分(右侧的路线)仍然是英语,并且街道采用了所需的语言。
也就是说,地图已显示,但一些标签和路线说明仍为英文,尽管我使用“法语” OpenStreetMap osmfr
瓷砖。
https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
我听说过使用Mapbox或MapTiles等翻译服务的解决方案,但我还没有尝试过。
我尝试accept-language=fr
向Nominatim API请求添加一个参数来获取地址:
string url = $"https://nominatim.openstreetmap.org/search?format=json&q={encodedAddress}&accept-language=fr";
但这并没有改变任何事情。
我还尝试使用所需的脚本实现第三方 API,但也没有帮助。
LeafletMap.js
:
// LeafletMap.js
export function initializeLeafletMap(startCoordinates, endCoordinates) {
var map = L.map('map').setView(startCoordinates, 13);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.fr/copyright">OpenStreetMap</a>'
}).addTo(map);
L.Routing.control({
waypoints: [
L.latLng(startCoordinates),
L.latLng(endCoordinates)
],
routeWhileDragging: true
}).addTo(map);
}
LeafletMap.razor
:
@rendermode InteractiveServer
@inject HttpClient httpClient
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntimeMap
<div id="map"></div>
@code {
#region property
public double[] StartCoordinates { get; set; }
public double[] EndCoordinates { get; set; }
[Parameter] public string StartCoordinatesAdresse { get; set; }
[Parameter] public string EndCoordinatesAdresse { get; set; }
private IJSObjectReference _jsModule;
#endregion
protected override async Task OnInitializedAsync()
{
httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("TestLeaflet"); //your projectName
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
try
{
_jsModule = await JsRuntimeMap.InvokeAsync<IJSObjectReference>("import", "/js/LeafletMap.js");
StartCoordinates = await GetCoordinatesFromAddress(StartCoordinatesAdresse);
EndCoordinates = await GetCoordinatesFromAddress(EndCoordinatesAdresse);
if (StartCoordinates != null && EndCoordinates != null)
{
await _jsModule.InvokeVoidAsync("initializeLeafletMap", StartCoordinates, EndCoordinates);
}
}
catch (Exception ex)
{
// Log.WriteLogException(ex);
}
}
}
private async Task<double[]> GetCoordinatesFromAddress(string address)
{
try
{
string encodedAddress = Uri.EscapeDataString(address);
string url = $"https://nominatim.openstreetmap.org/search?format=json&q={encodedAddress}&accept-language=fr";
var response = await httpClient.GetFromJsonAsync<NominatimResponse[]>(url);
if (response != null && response.Length > 0)
{
return new double[] { response[0].lat, response[0].lon };
}
}
catch (Exception ex)
{
// Log.WriteLogException(ex);
}
return null;
}
public class NominatimResponse
{
public double lat { get; set; }
public double lon { get; set; }
}
public async ValueTask DisposeAsync()
{
if (_jsModule != null)
{
await _jsModule.DisposeAsync();
}
}
}
问题:
如何翻译显示路线的右侧?