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

Question

我试图在用户点击按钮时得到一个特定半径的圆。我的应用程序在 Blazor 中。我从初始化函数开始，效果很好。但是，GetCircle() 函数不起作用，它给了我一个异常错误 'map.addLayer is not a function' 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 is not a function' 我试着用 'addTo(map)' 代替 addLayer ，结果出现了同样的错误。

有什么提示吗？

Answer 1

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

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

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

Cannot get a circle on the Leaflet Map when user clicks on the button - Blazor

javascript

c#

leaflet

blazor