在UWP上创建可拖动的地图图钉 [英] Creating a draggable map pin on UWP

问题描述

按照此处链接中的说明进行操作后

After following the instructions in the link here How to create draggable pin in windows 10 to give pick location functionality? I have a half working dragging pin.

当前地图图钉(网格)从地图上的正确位置开始，但是，拖动地图图钉时，该图钉最初会弹出到屏幕的左上角(0,0)，然后从此处开始拖动.放下图钉后，它似乎已与地图元素本身断开连接，然后您可以滚动地图，图钉会停留在屏幕上的位置.

Currently the map pin (Grid) starts in the correct place on the map, however, upon dragging the map pin the pin initially pops up to the top left of the screen (0,0) and starts dragging from here. Upon dropping the pin it appears to have disconnected from the map element itself as you can then scroll the map and the pin stays in place on the screen.

我正在将Xamarin.Forms与自定义地图渲染器一起使用.在原始示例之后，地图仍会随着图钉拖动而平移，我通过在Grid_ManipuationStarted上禁用平移来更正了此问题.问题似乎与Grid_ManipulationDelta函数有关，因为这是从MapControl子级中删除Grid的原因.

I am using Xamarin.Forms with a custom map renderer. Following the original example the map would still pan along with the pin dragging, I corrected this by disabling panning upon Grid_ManipuationStarted. The issue seems to be with the Grid_ManipulationDelta function as this is what removes the Grid from the MapControl children.

我已将有关此问题的视频上传到YouTube.在这里找到: https://youtu.be/uUkB5Pi5MnA

I've uploaded a video of the issue onto YouTube. Found here: https://youtu.be/uUkB5Pi5MnA

我的代码如下:

    void IMapControls.startDraggable(Location l) {
        // Create the XAML
        var grid = new Windows.UI.Xaml.Controls.Grid {
            Height=50,
            Width=32,
            Background = new ImageBrush() { ImageSource= new BitmapImage(new Uri("ms-appx:///pin.png",UriKind.RelativeOrAbsolute)),Stretch = Stretch.Uniform },
        };
        grid.ManipulationMode = ManipulationModes.TranslateX|ManipulationModes.TranslateY;
        grid.ManipulationCompleted += Grid_ManipulationCompleted;
        grid.ManipulationStarted += Grid_ManipuationStarted;
        grid.ManipulationDelta += Grid_ManipulationDelta;
        // Set RenderTransform so not null later
        CompositeTransform tran = new CompositeTransform();
        grid.RenderTransform = tran;
        // Add XAML to the map.
        nativeMap.Children.Add(grid);
        Geopoint snPoint = new Geopoint(new BasicGeoposition() { Latitude = l.lat,Longitude = l.lng });
        MapControl.SetLocation(grid,snPoint);
        MapControl.SetNormalizedAnchorPoint(grid,new Windows.Foundation.Point(0.5,1.0));
    }

    private void Grid_ManipuationStarted(Object sender,ManipulationStartedRoutedEventArgs e) {
        nativeMap.PanInteractionMode=MapPanInteractionMode.Disabled;
    }

    private void Grid_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e) {
        var grid = sender as Windows.UI.Xaml.Controls.Grid;
        CompositeTransform xform = grid.RenderTransform as CompositeTransform;

        xform.TranslateX += e.Delta.Translation.X;
        xform.TranslateY += e.Delta.Translation.Y;

        e.Handled = true;
    }

    private void Grid_ManipulationCompleted(object sender,ManipulationCompletedRoutedEventArgs e) {
        nativeMap.PanInteractionMode=MapPanInteractionMode.Auto;
        var grid = sender as Windows.UI.Xaml.Controls.Grid;
        Rect point = grid.TransformToVisual(nativeMap).TransformBounds(new Rect(0,0,grid.Width,grid.Height));
        Geopoint gPoint;
        nativeMap.GetLocationFromOffset(new Windows.Foundation.Point(point.X,point.Y),out gPoint);
        Debug.WriteLine(gPoint.Position.Latitude);
        Debug.WriteLine(gPoint.Position.Longitude);
    }

推荐答案

通过创建Grid并将其添加到地图，然后创建Image并将其添加到Grid来解决此问题.像上面那样使用Delta.Translation拖动Image，然后放下销钉，使用MapControl.SetLocation(Not TranslateX/Y)将网格移动到销钉放置的位置，然后将销钉Image的TranslateX/Y转换为0,0(相对于父网格).这适用于Grid仅使用SetLocation移动的情况，后者似乎工作正常，并且不会像以前那样将其与地图断开连接.销相对于网格移动，并且没有以前那样的问题，即.启动时移至0,0并与地图对象断开连接.

Solved this by creating a Grid and adding it to the map, then creating an Image and adding this to the Grid. You drag the Image using Delta.Translation as above and upon dropping the pin it moves the Grid using MapControl.SetLocation (Not TranslateX/Y) to where the pin drops, then TranslateX/Y the pin Image to 0,0 (relative to the parent Grid). This works as the Grid only moves using SetLocation which seems to work fine and doesn't disconnect it from the map like before. The pin moves relative to the Grid and has no issues as before, ie. Moving to 0,0 upon start and disconnecting from the map object.

干杯！

如果有人感兴趣，可以发布代码，但我认为这很容易解释.

Can post code if anyone is interested but I think it is pretty self explanatory.

这篇关于在UWP上创建可拖动的地图图钉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！