在 UWP 上创建可拖动的地图图钉

Question

按照 link 此处中的说明进行操作后我有一个半工作的拖针。

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

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

我已将有关该问题的视频上传到 YouTube。在这里找到：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);
    }

Answer 1

通过创建网格并将其添加到地图，然后创建图像并将其添加到网格来解决此问题。如上所述使用 Delta.Translation 拖动图像，在放下图钉时，它使用 MapControl.SetLocation（不是 TranslateX/Y）将网格移动到图钉掉落的位置，然后 TranslateX/Y 图钉图像到 0,0（相对于父网格）。这是因为网格仅使用 SetLocation 移动，这似乎工作正常并且不会像以前那样将其与地图断开连接。 pin 相对于 Grid 移动并且没有像以前那样的问题，即。开始时移动到 0,0 并与地图对象断开连接。

干杯！

如果有人感兴趣，可以 post 编写代码，但我认为它很容易解释。

在 UWP 上创建可拖动的地图图钉

Creating a draggable map pin on UWP

c#

uwp

xamarin.forms

draggable

pushpin