形象在地图上的图钉 - 的Windows phone 8 [英] Image as pushpin on maps - Windows phone 8
本文介绍了形象在地图上的图钉 - 的Windows phone 8的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试一个图像添加到一款Windows Phone 8的地图，作为一个图钉
我有我的XAML下面的代码
<电话：的PhoneApplicationPage
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
的xmlns：手机=CLR的命名空间：Microsoft.Phone.Controls;装配= Microsoft.Phone
的xmlns：SHELL =CLR的命名空间：Microsoft.Phone.Shell;装配= Microsoft.Phone
的xmlns：D =http://schemas.microsoft.com/expression/blend/2008
的xmlns：MC =http://schemas.openxmlformats.org/markup-compatibility/2006
的xmlns：地图=CLR的命名空间：Microsoft.Phone.Maps.Controls;装配= Microsoft.Phone。地图
X：类=Cartuxa.Contactos
的FontFamily ={StaticResource的PhoneFontFamilyNormal}
字号={StaticResource的PhoneFontSizeNormal}
前景={StaticResource的PhoneForegroundBrush}
SupportedOrientations =纵向方向=纵向
MC：可忽略=D
壳：SystemTray.IsVisible =真>
<！ - LayoutRoot是所有页面内容放在根格 - >
<电网X：NAME =LayoutRoot>
< Grid.Background>
<的ImageBrush的ImageSource =/ Assets/Images/bkContacts@2x.png/>
< /Grid.Background>
< Grid.RowDefinitions>
< RowDefinition高度=自动/>
< RowDefinition高度=*/>
< /Grid.RowDefinitions>
<！ - TitlePanel包含应用程序和页面标题的名字 - >
< StackPanel的Grid.Row =0利润=12,17,0,28/>
<电网X：名称=的ContentPanelGrid.RowSpan =2保证金=0，-6,0,6>
< Grid.ColumnDefinitions>
< ColumnDefinition WIDTH =127 */>
< ColumnDefinition WIDTH =329 */>
< /Grid.ColumnDefinitions>
<图像的HorizontalAlignment =左保证金=18.75,57.5,0,0VerticalAlignment =评出的源=/ Assets/Images/logo@2x.png拉伸=填充Grid.ColumnSpan =2WIDTH =221HEIGHT =72/>
< TextBlock中的HorizontalAlignment =左保证金=30,152,0,0TextWrapping =自动换行文本=ContactosVerticalAlignment =评出的前景=＃FFCD3333的FontFamily =黑体字号= 36Grid.ColumnSpan =2宽度=174/>
<按钮的HorizontalAlignment =右保证金=0201，-13,0VerticalAlignment =评出的WIDTH =255背景=白HEIGHT =66了borderThickness =0Grid.Column =1BorderBrush =＃FFFF0909>
<电网Grid.ColumnSpan =2>
<图像名称=POI_Left源=/ Assets/Images/POI_Gray@2x.pngRenderTransformOrigin =0.4,0.274的HorizontalAlignment =中心VerticalAlignment =中心保证金= - 180,0 ，0,0拉伸=无/>
< TextBlock中的HorizontalAlignment =左
保证金=13,6，-22,0
TextWrapping =包装
文本=PACOS DOS孔德百思图
VerticalAlignment =评出的
的FontFamily =黑体
前景=黑
字号=14WIDTH =182/>
< /网格和GT;
< /按钮>
<地图：地图名称=contactosMaps的HorizontalAlignment =左保证金=0,271,0,0VerticalAlignment =评出的RenderTransformOrigin = - 1.737，-0.175Grid.ColumnSpan =2身高=290WIDTH =480/>
<按钮名称=Contactos_Btn1
点击=Contactos_Btn1_Click
的HorizontalAlignment =右
保证金= - 17,201,242,0
VerticalAlignment =壮志
宽度=255
背景=白
高度=65
了borderThickness =0
Grid.ColumnSpan =2>
<电网NAME =pushRedGrid.ColumnSpan =2>
<图像X：NAME =POI_Right源=/ Assets/Images/POI_Red@2x.pngRenderTransformOrigin =0.4,0.274的HorizontalAlignment =中心VerticalAlignment =中心保证金= - 190 ，0,0,0拉伸=无/>
< TextBlock中的HorizontalAlignment =左保证金=14,6，-14,0TextWrapping =自动换行文本=Fundação欧亨尼奥·德阿尔梅达VerticalAlignment =顶部的FontFamily =黑体前景=黑字号=14/>
< /网格和GT;
< /按钮>
< TextBlock中的HorizontalAlignment =左保证金=26,606,0,0TextWrapping =包装VerticalAlignment =评出的Grid.ColumnSpan =2WIDTH =406HEIGHT =22>
<运行的FontFamily =黑体文本=Fundação欧亨尼奥·德阿尔梅达/>
<断行/>
<运行/>
< / TextBlock的>
< TextBlock中的HorizontalAlignment =左保证金=30,655,0,0TextWrapping =包装VerticalAlignment =评出的Grid.ColumnSpan =2WIDTH =402HEIGHT =85的FontFamily = 黑体>
<运行文本=Pateo酒店德圣米格尔/>
<断行/>
<运行文本=阿帕2001年，埃武拉7001-901/>
<断行/>
<运行文本=葡萄牙/>
<断行/>
<运行/>
< / TextBlock的>
< TextBlock中的HorizontalAlignment =左保证金=30,745,0,0TextWrapping =包装VerticalAlignment =评出的Grid.ColumnSpan =2WIDTH =406HEIGHT =22文本= 电话：（+351）266 748 300/>
< TextBlock中的HorizontalAlignment =左保证金=30,773,0,0TextWrapping =包装VerticalAlignment =评出的Grid.ColumnSpan =2WIDTH =406HEIGHT =22>
<运行的FontFamily =黑体文字= />传真：（+ 351）266 705 149。
<运行的FontFamily =黑体/>
<运行/>
< / TextBlock的>
< /网格和GT;
< /网格和GT;
和我的.cs代码以下
公共部分类Contactos：的PhoneApplicationPage
{
公共Contactos（）
{
的InitializeComponent（）;
加载+ = Contactos_Loaded;
}
私人无效Contactos_Loaded（对象发件人，RoutedEventArgs E）
{
UpdateMap（）;
}
私人无效UpdateMap（）
{
MapOverlay引脚=新MapOverlay（）;
pin.Content = pushRed;
pin.GeoCoordinate =新会有地理座标（38.57325D，-7.90546）;
pin.PositionOrigin =新的点（0,0.5）;
MapLayer pinLayer =新MapLayer（）;
pinLayer.Add（针）;
contactosMaps.Layers.Add（pinLayer）;
contactosMaps.SetView（新会有地理座标（38.57325D，-7.90546），14D）;
}
私人无效Contactos_Btn1_Click（对象发件人，RoutedEventArgs E）
{
}
}
当我尝试运行我的项目，它加载地图，过了一会儿我得到这个例外
其他信息：值没有在预期的范围内
当我做了contactosMaps.Layers.Add（pinLayer）;
我不能有一个网格与图像作为一个图钉？
解决方案
发现
使用的Phone.Controls.Toolkit： -
的 http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit -a获奖团队部分-1 /
该工具包可在任一
发现
或
https://www.nuget.org/packages/WPtoolkit
然后，您可以添加图片直接在XAML如下： -
<地图：地图加载=MapControl_Loaded缩放级别=18NAME =地图控件>
<工具箱：MapExtensions.Children>
<工具箱：图钉X：NAME =MyPushpin>
<工具箱：Pushpin.Template>
<的ControlTemplate的TargetType =工具箱：图钉>
<&StackPanel的GT;
<图像源=/图像/ MapScreen / MapScreenCurrentLocationPin.png拉伸=统一WIDTH =50HEIGHT =50的HorizontalAlignment =中心/>
< / StackPanel的>
< /控件模板>
< /工具包：Pushpin.Template>
< /工具包：图钉>
< /工具包：MapExtensions.Children>
< /地图：地图>
或者你可以在C＃中如下添加： -
MapOverlay覆盖=新MapOverlay
{
=会有地理座标myMap.Center，
含量=新的椭圆
{
=填写新的SolidColorBrush（Colors.Red），
宽度= 40，
高度= 40
}
};
MapLayer层=新MapLayer（）;
layer.Add（覆盖）;
myMap.Layers.Add（层）;
您应该能够添加一个网格的图像，而不是一个椭圆形的，如上图所示。
让我知道，如果这个工作适合你。
im trying to add a image to a windows phone 8 map, to serve as a pushpin
i have the following code on my XAML
<phone:PhoneApplicationPage
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.Maps.Controls;assembly=Microsoft.Phone.Maps"
x:Class="Cartuxa.Contactos"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Images/bkContacts@2x.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28"/>
<Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="127*"/>
<ColumnDefinition Width="329*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo@2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
<TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/>
<Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909">
<Grid Grid.ColumnSpan="2">
<Image Name="POI_Left" Source="/Assets/Images/POI_Gray@2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left"
Margin="13,6,-22,0"
TextWrapping="Wrap"
Text="Paços dos Condes de Basto"
VerticalAlignment="Top"
FontFamily="Helvetica"
Foreground="Black"
FontSize="14" Width="182"/>
</Grid>
</Button>
<maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/>
<Button Name="Contactos_Btn1"
Click="Contactos_Btn1_Click"
HorizontalAlignment="Right"
Margin="-17,201,242,0"
VerticalAlignment="Top"
Width="255"
Background="White"
Height="65"
BorderThickness="0"
Grid.ColumnSpan="2">
<Grid Name="pushRed" Grid.ColumnSpan="2">
<Image x:Name="POI_Right" Source="/Assets/Images/POI_Red@2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/>
</Grid>
</Button>
<TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica">
<Run Text="Páteo de São Miguel "/>
<LineBreak/>
<Run Text="Apartado 2001, 7001-901 Évora "/>
<LineBreak/>
<Run Text="Portugal"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/>
<TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/>
<Run FontFamily="Helvetica"/>
<Run/>
</TextBlock>
</Grid>
</Grid>
and my .cs code is the following
public partial class Contactos : PhoneApplicationPage
{
public Contactos()
{
InitializeComponent();
Loaded +=Contactos_Loaded;
}
private void Contactos_Loaded(object sender, RoutedEventArgs e)
{
UpdateMap();
}
private void UpdateMap()
{
MapOverlay pin = new MapOverlay();
pin.Content = pushRed;
pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
pin.PositionOrigin = new Point(0, 0.5);
MapLayer pinLayer = new MapLayer();
pinLayer.Add(pin);
contactosMaps.Layers.Add(pinLayer);
contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
}
private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
{
}
}
when i try to run my project, it loads the map but a few moments later i get this exception
"Additional information: Value does not fall within the expected range."
when i do the "contactosMaps.Layers.Add(pinLayer);"
can't i have that Grid with the image as a pushpin?
解决方案
Use the Phone.Controls.Toolkit as described here:-
http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit-a-winning-team-part-1/
The toolkit can be found at either of
or
https://www.nuget.org/packages/WPtoolkit
You can then either add the image directly in your XAML as follows:-
<maps:Map Loaded="MapControl_Loaded" ZoomLevel="18" Name="MapControl">
<toolkit:MapExtensions.Children>
<toolkit:Pushpin x:Name="MyPushpin">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<Image Source="/Images/MapScreen/MapScreenCurrentLocationPin.png" Stretch="Uniform" Width="50" Height="50" HorizontalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</toolkit:MapExtensions.Children>
</maps:Map>
or you can add it in C# as follows:-
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = myMap.Center,
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
myMap.Layers.Add(layer);
You should be able to add a Grid with an image instead of an ellipse as shown above.
Let me know if this worked for you.
这篇关于形象在地图上的图钉 - 的Windows phone 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
