BlazorGoogleMaps-从用户那里获取位置

Question

有了这个组件，我如何让用户选择一个位置(一个点(？

我有一个表单，用户需要感受地址，还需要将纬度和经度发送到服务器。

这就是我目前所拥有的，它只是显示了一张我可以导航的地图：

<GoogleMap Options="mapOptions" />
@code {
MapOptions mapOptions = new MapOptions()
{
Zoom = 13,
Center = new LatLngLiteral()
{
Lat = ...,
Lng = ...
},
MapTypeId = MapTypeId.Roadmap
};
}

Answer 1

您可以使用MapEventList组件：

<GoogleMap @ref="@map1" Id="map1" Options="@mapOptions" OnAfterInit="@(async () => await OnAfterInitAsync())">
</GoogleMap>
<input type="checkbox" bind="@DisablePoiInfoWindow" />Disable POI's popup info window
<br>
<MapEventList @ref="@eventList" Events="@_events"></MapEventList>
@code {
private GoogleMap map1;
private MapEventList eventList;
private MapOptions mapOptions;
private List<String> _events = new List<String>();
private bool DisablePoiInfoWindow { get; set; } = false;
protected override void OnInitialized()
{
mapOptions = new MapOptions()
{
Zoom = 13,
Center = new LatLngLiteral()
{
Lat = 13.505892,
Lng = 100.8162
},
MapTypeId = MapTypeId.Roadmap
};
}
private async Task OnAfterInitAsync()
{
await map1.InteropObject.AddListener<MouseEvent>("click", async (e) => await OnClick(e));  
}
private async Task OnClick(MouseEvent e)
{
_events.Insert(0, $"Click {e.LatLng}.");
_events = _events.Take(100).ToList();
StateHasChanged();
if (DisablePoiInfoWindow)
{
await e.Stop();
}
}
}

查看演示https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/ClientSideDemo/Pages/MapEvents.razor