Windows Phone中Map控件由浅及深

系统管理员 2021-12-24 02:53 204阅读 0赞

鄙人所在的OMG团队在高级软件工程课程团队项目，负责Microsoft的Academic Search在手机WP7.1上客户端的开发。现已进入十天的beta版本开发阶段。这两天用到了Map控件，我想结合自己dev的经历，对Map控件稍作介绍。

〖PS：我们是来自中国科大各个专业（数学、EE、CS）的大四学生，六个人，欢迎各位看官来我们的团队技术博客指点一二：[http://www.cnblogs.com/OMG-Team/][http_www.cnblogs.com_OMG-Team]〗

Map控件，是基于Microsoft的Bing map的地图控件，在WP7能很好的使用bing map实现地图的呈现，缩放，标注和定位等功能。

首先，介绍一下Map控件的简单应用吧。

在使用Map控件之前，我们必须先注册地图获得一个Register Key才能够使用bing map，注册地址：[https://www.bingmapsportal.com][https_www.bingmapsportal.com] 。新建一个Sliverlight for Windows Phone的工程，就可以开始练习使用Map控件了。在xaml里添加一个地图控件

在.cs文件里添加register key的代码（或者不使用Binding直接写在xaml中也行）

>     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
>     <my:Map Height="623" HorizontalAlignment="Left" 
>                         CredentialsProvider="{Binding CredentialsProvider}" 
>                         Margin="12,-22,0,0" Name="map1"
>     
>                         VerticalAlignment="Top" Width="425"/> 
>     </Grid>
> 
>   
>   
>

note：应该添加一个namespace：

>     1 using Microsoft.Phone.Controls.Maps; 
>      2 
>      3 namespace MapExample 
>      4 { 
>      5       public partial class MainPage : PhoneApplicationPage 
>      6      { 
>      7           const String BingMapsId = "Al7xKT8k0tvRNSCTc0uQs6AM1k-gREOdyigcbbbL4z932ynL42ySQuht1Ur6hpLI"; 
>      8           private readonly CredentialsProvider credentialsProvider = new ApplicationIdCredentialsProvider(BingMapsId); 
>      9           public CredentialsProvider CredentialsProvider 
>     10           { 
>     11                get { return credentialsProvider; } 
>     12           } 
>     13           // Constructor 
>     14           public MainPage() 
>     15           { 
>     16               InitializeComponent(); 
>     17            } 
>     18       } 
>     19 }
> 
>   
>   
>

这样就可以运行一个最基本的map控件了。

下面，我们看看如何设置map的中心点以及Zoomlevel以及显示模式。

这个很简单只需要改变Center、 Zoomlevel和Map.Mode这几个属性的值，同样可以在xaml直接设置，或者在.cs文件里设置，当然，更高级点的用法就是对Center，zoomlevel等进行Binding了。

Map控件还有很多其他的属性，比如ZoomBarVisibility，ScaleVisibility，LogoVisibility等，这些都可以简单的进行设置或者通过Binding技术实现动态的属性值的改变。  
然而，Map控件还提供添加标注，添加图片，绘制多边形，多边线等功能。

下面讲讲如何添加一个标记吧。

首先，我们可以在MainPage()里建立并初始化一个标记（ 记得添加namespace： using System.Device.Location; )

>     1 Pushpin pin = new Pushpin(); 
>     2 pin.Location = new GeoCoordinate(30, 120); 
>     3 pin.Background = new SolidColorBrush(Colors.Black); 
>     4 pin.Content = "Example"; 
>     5 pin.Height = 40; 
>     6 pin.Width = 80; 
>     7 map1.Children.Add(pin);   //  一定要记得添加到map1这个控件中哦~
> 
>   
>   
>

对于多边线,我们用到的是Polyline这样一个类，多边形的绘制使用Polygon这个类，插入图片使用MapLayer类，它们的使用跟Pushpin这个类异曲同工。

以上就是一些简单的应用，那么来点实际点的。

我在开发过程中需要使用Map控件实现动态定位，找到自己的所在位置以及某个会议要举行的位置，并在切换过程中在地图中标注出相应的位置，并支持WP7.1的多点触控进行Zoomin和Zoomout。

这需要写一个page，我把它叫做MapPage，然后它的入口接收在页面Navigate时候传过来的三个值，一个是会议举行地点的经度，一个是纬度，还有一个是label，显示在标注上的文字。下面给出源代码仅供参考。

创建一个MapPage，xaml文件如下：

<phone:PhoneApplicationPage x:Class="Client.MapPage"
        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:System="clr-namespace:System;assembly=mscorlib"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource MyPhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728"
        shell:SystemTray.IsVisible="False"
        xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    >
    
    <Canvas x:Name="LayoutRoot">
    
    
    <Border x:Name="Mapw"
                    Height="768" Width="480">
    <my:Map Name="Map" 
                        CredentialsProvider="{Binding CredentialsProvider}"
                        CopyrightVisibility="Collapsed"
                        LogoVisibility="Collapsed"
                        ZoomLevel="{Binding Zoom, Mode=TwoWay}"
                        Center="{Binding Center, Mode=TwoWay}"
    >
    <my:Map.Mode>
    <my:RoadMode />
    </my:Map.Mode>
    
    <my:MapItemsControl x:Name="mapControl"/>
    </my:Map>
    
    
    
    </Border>
    
    </Canvas>
    
    <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar.location.rest.png" Text="current" Click="CurrentLocation_Click"/>
    <shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="venue" Click="VenueLocation_Click"/>
    </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
    
    </phone:PhoneApplicationPage>

在MapPage.cs文件里完成相应的处理：

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Controls.Maps;
    using System.Device.Location;
    using System.ComponentModel;
    using Microsoft.Phone.Controls.Maps.Core;
    
    namespace Client
    {
        
    public partial class MapPage : PhoneApplicationPage, INotifyPropertyChanged
        {
        
    public MapPage()
            {
        
    this.Loaded += new RoutedEventHandler(MapPage_Loaded);
                InitializeComponent();
                InitializeDefaults();
    
                DataContext = this;
            }
    
    private readonly CredentialsProvider credentialsProvider = new ApplicationIdCredentialsProvider(AcademicSearch.App.BingMapsId);          
    public CredentialsProvider CredentialsProvider
            {
        
    get { return credentialsProvider; }
            }
    
    private MapLayer pushpinLayer;
    private string pushpinLabel;
    private Pushpin locationMark;
    void MapPage_Loaded(object sender, RoutedEventArgs e)
            {
        
                NotifyPropertyChanged("Zoom");
                NotifyPropertyChanged("Center");
                pushpinLayer = new MapLayer();
                Map.Children.Add(pushpinLayer);
                pushpinLayer.AddChild(
    new Pushpin() {Content =new Border() { Child = new TextBlock() { Text = pushpinLabel },

Background=new SolidColorBrush(Colors.Black)}},
                    Center);
                    locationMark = new Pushpin() { Content = new Border() { Child = new TextBlock() { Text = "You Are Here!" },

Background = new SolidColorBrush(Colors.Black) } };
                pushpinLayer.AddChild(locationMark, new GeoCoordinate(0, 0));
            }
    
    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
        
    base.OnNavigatedTo(e);
    string longitudeStr;
    string latitudeStr;
    if (NavigationContext.QueryString.TryGetValue("longitude", out longitudeStr) && NavigationContext.QueryString.TryGetValue("latitude", out latitudeStr))
                {
        
    double latitude; 
    double longitude;
    if (Double.TryParse(latitudeStr, out latitude) && Double.TryParse(longitudeStr, out longitude))
                    {
        
                        Center = new GeoCoordinate(latitude, longitude);
                        Venue = new GeoCoordinate(latitude, longitude);
                        Zoom = DefaultZoomLevel;
                    }
    string label;
    if (NavigationContext.QueryString.TryGetValue("label", out label))
                    {
        
                        pushpinLabel = label;
                    }
    else
                    {
        
                        pushpinLabel = "";
                    }
                }
            }
    
    public void AddPushpin(GeoCoordinate location)
            {
        
                Pushpin pushpin = new Pushpin();
                pushpin.Content = "Test";
                pushpinLayer.AddChild(pushpin, location);
            }
    
    ///<summary>
    /// Gets or sets the map zoom level.
    ///</summary>
            private const double DefaultZoomLevel = 17.0;
    private const double MaxZoomLevel = 21.0;
    private const double MinZoomLevel = 1.0;
    
    private double _zoom = DefaultZoomLevel;
    public double Zoom
            {
        
    get { return _zoom; }
    set
                {
        
    var coercedZoom = Math.Max(MinZoomLevel, Math.Min(MaxZoomLevel, value));
    if (_zoom != coercedZoom)
                    {
        
                        _zoom = value;
                        NotifyPropertyChanged("Zoom");
                    }
                }
            }
    
    private GeoCoordinateWatcher loc = null;
    
    private void CurrentLocation_Click(object sender, EventArgs e)
            {
        
    //Zoom += 1;
                if (loc == null)
                {
        
                    loc = new GeoCoordinateWatcher(GeoPositionAccuracy.Default);
                    loc.StatusChanged += loc_StatusChanged;
                }
    if (loc.Status == GeoPositionStatus.Disabled)
                {
        
                    loc.StatusChanged -= loc_StatusChanged;
                    MessageBox.Show("Location services must be enabled on your phone.");
    return;
                }
                loc.Start();
            }
    
    void loc_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
            {
        
    
    if (e.Status == GeoPositionStatus.Ready)
                {
        
                    locationMark.Location = loc.Position.Location;
                    Map.SetView(loc.Position.Location, 17.0);
                    loc.Stop();
                }
            }
    
    private void VenueLocation_Click(object sender, EventArgs e)
            {
        
                Map.SetView(Venue, 17.0);
            }
    
    private GeoCoordinate _center;
    public GeoCoordinate Center
            {
        
    get { return _center; }
    set
                {
        
    if (_center != value)
                    {
        
                        _center = value;
                        NotifyPropertyChanged("Center");
                    }
                }
            }
    
    private GeoCoordinate Venue;
    
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
            {
        
                PropertyChangedEventHandler handler = PropertyChanged;
    if (null != handler)
                {
        
                    handler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
    
    public bool HasDirections
            {
        
    get
                {
        
    // TODO : Return true only if has directions.
    
    return true;
                }
            }
    
    
    #region Tasks
    
    private void InitializeDefaults()
            {
        
    // TODO : Initialize default properties.
            }
    
    private void ChangeMapMode()
            {
        
    // TODO : Change map view mode.
            }
    
    private void IncreaseZoomLevel()
            {
        
    // TODO : Increases zoom level.
            }
    
    private void DecreaseZoomLevel()
            {
        
    // TODO : Decreases zoom level.
            }
    
    private void CenterLocation()
            {
        
    // TODO : Center current location.
            }
    
    private void CenterPushpinsPopup(Point touchPoint)
            {
        
    // TODO : Center pushpins popup to the touch point.
            }
    
    private void CreateNewPushpin(object selectedItem, Point point)
            {
        
    // TODO : Create a new pushpin.
            }
    
    private void CalculateRoute()
            {
        
    // TODO : Calculate a route.
            }        
    
    #endregion
    
        }
    }

MSRA-USTC Class

OMG team

转载于:https://www.cnblogs.com/OMG-Team/archive/2011/11/18/2253609.html

[http_www.cnblogs.com_OMG-Team]: http://www.cnblogs.com/OMG-Team/
[https_www.bingmapsportal.com]: https://www.bingmapsportal.com