当用户点击按钮-Blazor时，无法在传单地图上获得圆圈

Question

当用户单击按钮时，我正试图获得一个特定半径的圆。我的申请在布拉佐。我已经从初始化功能开始，它工作得很好。然而，GetCircle((函数不起作用，它给了我一个异常错误"map.addLayer不是函数"I。

当我还试图在代码顶部声明map和circle变量时，错误变成了"无法读取未定义的属性(正在读取"_leaflet_id">

这是我的js:

window.myMap = {
initialise : function(){
var map = L.map('map').setView([51.75164151931502, -1.2382256195107832], 15);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: '----'
}).addTo(map);
var marker = L.marker([51.75262676993951, -1.2533975397416488]).addTo(map);

map.on('click',function(e) {
if (marker !== null ) {
map.removeLayer(marker);
}

marker = new L.Marker(e.latlng);
map.addLayer(marker);

});
},
GetCircle: function()
{
//here is the issue
var circle = L.circle([51.75262676993951,-1.2533975397416488],{radius:300});

map.addLayer(circle);
}

};

这是我的Blazor组件：

@page "/testt"
@inject IJSRuntime JSRuntime
@using Microsoft.JSInterop

<style>
#map {
height: 600px;
}

</style>
<br>
<div class="col-9" id="map"  ></div>
<button @onclick="GetCircle">
Get Area
</button>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("myMap.initialise");
StateHasChanged();
}
}
public async Task GetCircle()
{
await JSRuntime.InvokeVoidAsync("myMap.GetCircle");

}
}

我得到"map.addLayer不是函数"我试着用"addTo(map("代替addLayer，结果出现了同样的错误。

有什么提示吗？

Answer 1

您的map变量不可访问gloabl。您可以执行以下操作：

var map = L.map('map').setView([51.75164151931502, -1.2382256195107832], 15);
window.map = map;

GetCircle: function()
{
var circle = L.circle([51.75262676993951,-1.2533975397416488],{radius:300});
window.map.addLayer(circle);
}