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