用于 Silverlight 4 和 Windows Phone 7 的 Bing 地图控件中的交互式图层 [英] Interactive layers in Bing map control for Silverlight 4 and Windows Phone 7

问题描述

当使用 Bing 地图控件时，我的应用程序添加了一个叠加层，在其上将位置标记绘制为椭圆.每个椭圆都连接到一个 Tap 处理程序，该处理程序在 WP7 模拟器中按预期工作.遗憾的是，HTC 硬件似乎并非如此——地图本身似乎可以获取所有输入.有谁知道我该如何解决这个问题.更好的是有一个交互式层的工作示例吗?

When using the Bing map control my app adds an overlay on which to draw position markers as ellipses. Each ellipse is wired to a tap handler which works as expected in the WP7 emulator. Sadly this does not seem to be the case on HTC hardware - the map itself seems to grab all input. Does anyone know how I can fix this. Better still is there a working example with interactive layers?

Thx++

推荐答案

如果您使用 Visual Studio 2010 中的默认模板创建新的 windows phone 7.1 silverlight 应用程序，则只需将以下内容复制到 MainPage.xaml 和 MainPage.cs文件.您还需要引用 System.Device 和 Microsoft.Phone.Controls.Maps Dll.这应该允许您单击椭圆.我已经在两部不同的 WP7 手机上进行了测试，效果很好.

If you create a new windows phone 7.1 silverlight application using the default template in Visual Studio 2010, then just copy the following into the MainPage.xaml and MainPage.cs files. You will need to reference the System.Device and Microsoft.Phone.Controls.Maps Dlls as well. This should allow you to click on the ellipses. I have tested it on two different WP7 phones and it works fine.

<phone:PhoneApplicationPage 
    x:Class="SampleMapApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Name="EllipseTemplate">
            <maps:Pushpin Location="{Binding}" Tap="Pushpin_Tap">
                <maps:Pushpin.Template>
                    <ControlTemplate>
                        <Ellipse Width="15" Height="15" Stroke="White" StrokeThickness="2">
                            <Ellipse.RenderTransform>
                                <TranslateTransform X="-5" Y="5"/>
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <SolidColorBrush Color="DarkBlue" Opacity="0.8"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </ControlTemplate>
                </maps:Pushpin.Template>
            </maps:Pushpin>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="5">
            <TextBlock Text="Sample Map Application" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
            <maps:Map>
                <maps:MapLayer>
                    <maps:MapItemsControl ItemsSource="{Binding Locations}" ItemTemplate="{StaticResource EllipseTemplate}"/>
                </maps:MapLayer>
                <maps:Pushpin Location="{Binding CurrentLocation, Mode=TwoWay}" Content="{Binding CurrentLocation, Mode=TwoWay}"/>
            </maps:Map>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

CS

using System.Collections.ObjectModel;
using System.Device.Location;
using System.Windows;
using System.Windows.Input;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;

namespace SampleMapApp {
    public partial class MainPage : PhoneApplicationPage {
        // Constructor
        public MainPage() {
            InitializeComponent();
            Locations = new ObservableCollection<GeoCoordinate>() {
                new GeoCoordinate(-56, 73),
                new GeoCoordinate(-14, 120),
                new GeoCoordinate(48, -133),
                new GeoCoordinate(-2, 11),
                new GeoCoordinate(0, 40),
                new GeoCoordinate(-78, -85),
            };
            CurrentLocation = Locations[0];
            DataContext = this;
        }

        public ObservableCollection<GeoCoordinate> Locations { get; set; }

        #region CurrentLocation
        public GeoCoordinate CurrentLocation {
            get { return (GeoCoordinate) GetValue(CurrentLocationProperty); }
            set { SetValue(CurrentLocationProperty, value); }
        }

        public static readonly DependencyProperty CurrentLocationProperty =
           DependencyProperty.Register("CurrentLocation", typeof(GeoCoordinate), typeof(MainPage), new PropertyMetadata(null));
        #endregion

        private void Pushpin_Tap(object sender, GestureEventArgs e) {
            CurrentLocation = (sender as Pushpin).Location;
        }
    }
}

这篇关于用于 Silverlight 4 和 Windows Phone 7 的 Bing 地图控件中的交互式图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！