xamarin.forms - 如何从 Xamarin.forms 中的引脚创建路由？

Question

使用 xamarin 我想添加一些引脚来映射以制作路线。

我用于添加引脚的 API：

{"Id":1,"X":1.0,"Y":2.0,"RouteId":1,"Route":null}

我用于添加路由的 API：

{"Id":1,"Name":"dd","Description":"fff"}

“RouteId:1”与“Id:1”相关联

我想通过按下按钮（OnNewRouteClicked）创建一条路线

我的代码：

 public partial class CreatorPage : ContentPage
{
    private CustomPin pin;
    public CreatorPage()
    {
        InitializeComponent();
        customMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(53.010281, 18.604922), Distance.FromMiles(1.0)));
    }

    private void OnClearClicked(object sender, EventArgs e)
    {
        customMap.Pins.Clear();
        customMap.MapElements.Clear();
    }
    private async void OnMapClicked(object sender, MapClickedEventArgs e)
    {
        if (String.IsNullOrWhiteSpace(nazwaEntry.Text))
        {
            await DisplayAlert("Błąd", "Podaj nazwę punktu", "Ok");
            return;
        }

        CustomPin pin = new CustomPin
        {
            Type = PinType.SavedPin,
            Position = new Position(e.Position.Latitude, e.Position.Longitude),
            Label = nazwaEntry.Text,
            Address = opisEntry.Text,
            Name = "Xamarin",
            Url = "http://xamarin.com/about/",
            Question = zagadkaEntry.Text,
            Answer = odpowiedzEntry.Text
        };

        pin.MarkerClicked += async (s, args) =>
        {
            args.HideInfoWindow = true;
            string pinName = ((CustomPin)s).Label;
            // string pytanie = ((CustomPin)s).Question;
            string opis = ((CustomPin)s).Address;
            // string odpowiedz = ((CustomPin)s).Answer;
            await DisplayAlert($"{pinName}", $"{opis}", "Quiz");
            // await DisplayAlert("Quiz", $"{pytanie}", "Przejdź do odpowiedzi");
            await Navigation.PushAsync(new QuestionPage(new Question()));

        };
        customMap.CustomPins = new List<CustomPin> { pin };
        customMap.Pins.Add(pin);

        var json = JsonConvert.SerializeObject(new { X =  pin.Position.Latitude, Y = pin.Position.Longitude });
        var content = new StringContent(json, Encoding.UTF8, "application/json");
        HttpClient client = new HttpClient();
        var result = await client.PostAsync("URL to points", content);
        if (result.StatusCode == HttpStatusCode.Created)
        {
            await DisplayAlert("Komunikat", "Dodanie puntku przebiegło pomyślnie", "Anuluj");
        }

    }
    private void OnNewRouteClicked(object sender, EventArgs e)
    {


    }

}

标签： xamarin.forms

Answer 1

我写了一个例子，希望对你有帮助。在 OnNewRouteClicked 方法中，获取所有points这些routeId = 1并用它们绘制一个polyline：

public partial class MainPage : ContentPage
{

    List<Points> myPoints { get; set; }
    Routes myRoute { get; set; }

    public MainPage()
    {
        InitializeComponent();

        //Some data you get from your apis
        myRoute = new Routes() { Id = 1 };

        myPoints = new List<Points>();

        myPoints.Add(new Points() { Id = 1, X = 55.6666, Y = 66.4444, RouteId = 1 }); ;
        myPoints.Add(new Points() { Id = 2, X = 52.6666, Y = 68.4444, RouteId = 1 }); ;
        myPoints.Add(new Points() { Id = 3, X = 53.6666, Y = 62.4444, RouteId = 1 }); ;
        myPoints.Add(new Points() { Id = 1, X = 55.6666, Y = 61.4444, RouteId = 2 }); ;
        myPoints.Add(new Points() { Id = 2, X = 51.6666, Y = 65.4444, RouteId = 2 }); ;
        myPoints.Add(new Points() { Id = 4, X = 54.6666, Y = 67.4444, RouteId = 1 }); ;
        myPoints.Add(new Points() { Id = 5, X = 59.6666, Y = 69.4444, RouteId = 1 }); ;
    }

    private void OnNewRouteClicked(object sender, EventArgs e)
    {
        List<Position> positions = new List<Position>();

        //Get all the points which RouteId = 1
        foreach (var item in myPoints)
        {

            Points tempPoint = item as Points;

            if (tempPoint.RouteId == myRoute.Id)
            {
                Position tempPosition = new Position(tempPoint.X,tempPoint.Y);
                positions.Add(tempPosition);
            }

        }

        //your map
        Map map = new Map
        {
            // ...
        };
        // instantiate a polyline
        Polyline polyline = new Polyline
        {
            StrokeColor = Color.Blue,
            StrokeWidth = 12,
        };

        //add your positions to polyline.Geopath
        foreach (var item in positions)
        {
            polyline.Geopath.Add(item);
        }

        // add the polyline to the map's MapElements collection
        map.MapElements.Add(polyline);

    }
}

public class Routes
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

public class Points
{
    public int Id { get; set; }
    public double X { get; set; }
    public double Y { get; set; }
    public int RouteId { get; set; }
}