This site uses cookies to deliver our services. By using this site, you acknowledge that you have read and understand our Cookie and Privacy policy. Your use of Kontext website is subject to this policy. Allow Cookies and Dismiss

Using Bing Maps Control in Windows Phone Applications

827 views 4 comments last modified about 7 years ago Raymond Tang Fahao

In this article, I will demonstrate how to use Bing Maps Control in Windows Phone applications. Please install Windows Phone SDK 7.1 before you go through this hands-on practice.

1. Create Windows Phone Application in Visual Studio 2010 with project name “BingMapsExample”

Create project using existing template Windows Phone Application:

image

Select Platform as Windows Phone OS 7.1:

image

2. Drag Map Control from the toolbox into MainPage.xaml

image

Rename the control name as “mapMain”.

From the XAML we could know this control is in Microsoft.Phone.Controls.Maps assembly:

xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps

Then run the application in Emulator:

image

Then Invalid Credential Error will occur as below screenshot shows:

Bing Maps Control in Windows Phone Screenshot - 1

The error occurred because there is no key provided; in next step, I will show how to register a developer key.

3. Register developer key for Bing Maps Control

Login http://www.bingmapsportal.com/ with your Windows Live ID.

Create or update your key in the portal (in default, only one key is allowed for developer):

image

Remember to choose Mobile as application type.

then we could use the key in the application:

image

(you can click Update hyper link button to update the key, e.g. change the application type.)

4. Use the key in our application

We add the key in constructor of MainPage.xaml.cs

      // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.mapMain.CredentialsProvider = new ApplicationIdCredentialsProvider("Your KEY");
        }

then re-run the application in Emulator and there is no error now:

Bing Maps Control in Windows Phone Screenshot - 2

5. Change the style of the map

Use Mode property to change the mode of the map: we can use RoadMode or AerialMode or MercatorMode or NullMode.

this.mapMain.Mode=new AerialMode();

this.mapMain.Mode=new RoadMode();

Below are screenshot of different modes:

Bing Maps Control in Windows Phone Screenshot - 3Bing Maps Control in Windows Phone Screenshot - 4

(RoadMode and AerialMode)

6. Using pushpins

We can use pushpin to specify a location in the map. I will show how to add a pushpin of my current location.

Add loaded handler for Loaded event:

<my:Map Height="600" HorizontalAlignment="Left" Name="mapMain" VerticalAlignment="Top" Width="450" Loaded="MapMainLoaded">
            </my:Map>

The code:

private void MapMainLoaded(object sender, RoutedEventArgs e)
        {
            var geoCoordinateMyPlace = new GeoCoordinate(30.549917722771724, 104.06983852386474);
            mapMain.Center = geoCoordinateMyPlace;
            mapMain.ZoomLevel = 15;

            var pushpin = new Pushpin
                                  {
                                      Content = "Tianfu Software Park",
                                      Location = geoCoordinateMyPlace,
                                      Background = (Brush) Application.Current.Resources["PhoneAccentBrush"]
                                  };

            mapMain.Children.Add(pushpin);
        }

The content property of pushpin could be any object.

The screenshot:

Bing Maps Control in Windows Phone Screenshot - 5

We could also add event handlers for pushpin; the below example will change the zoom level of the map:

pushpin.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(
               delegate(object o, ManipulationCompletedEventArgs args)
                   {
                       mapMain.ZoomLevel += 1;
                       args.Handled = true;
                   });

Bing Maps Control in Windows Phone Screenshot - 6

7. Using polylines and polygons
We can connect two or more coordinates in the map using polylines; we can also use polygons to specify an area in the map.

Below are the example codes (in this example we use SetView property instead of Center property to make sure that both the two pushpins will be displayed in the map view):

private void MapMainLoaded(object sender, RoutedEventArgs e)
        {
            var geoCoordinateMyPlace = new GeoCoordinate(30.549917722771724, 104.06983852386474);
            //mapMain.Center = geoCoordinateMyPlace;
            //mapMain.ZoomLevel = 15;
            var geoCoordinateCentryCity = new GeoCoordinate(30.55775252834303, 104.06786441802978);
            var geoCoordinateAnother = new GeoCoordinate(30.56775252834303, 104.06986441802978);
            var pushpin = new Pushpin
                                  {
                                      Content = "Tianfu Software Park",
                                      Location = geoCoordinateMyPlace,
                                      Background = (Brush)Application.Current.Resources["PhoneAccentBrush"]
                                  };
            pushpin.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(
                delegate(object o, ManipulationCompletedEventArgs args)
                {
                    mapMain.ZoomLevel += 1;
                    args.Handled = true;
                });
            var pushpin2 = new Pushpin
                                  {
                                      Content = "Century City",
                                      Location = geoCoordinateCentryCity,
                                      Background = (Brush)Application.Current.Resources["PhoneAccentBrush"]
                                  };
            var line = new MapPolyline
                           {
                               Locations = new LocationCollection {geoCoordinateMyPlace, geoCoordinateCentryCity},
                               Stroke = (Brush) Application.Current.Resources["PhoneAccentBrush"],
                               StrokeThickness = 3
                           };

            var polygon = new MapPolygon
                              {
                                  Locations =
                                      new LocationCollection
                                          {geoCoordinateMyPlace, geoCoordinateCentryCity, geoCoordinateAnother},
                                  Fill = new SolidColorBrush(Colors.Purple),
                                  Opacity = 0.5
                              };


            LocationRect rect = LocationRect.CreateLocationRect(line.Locations);
            mapMain.SetView(rect);

            mapMain.Children.Add(pushpin);
            mapMain.Children.Add(pushpin2);
            mapMain.Children.Add(line);
            mapMain.Children.Add(polygon);
        }

Below are the screenshots of above code:

Bing Maps Control in Windows Phone Screenshot - 7Bing Maps Control in Windows Phone Screenshot - 8

In next article, I will demonstrate how to use Route Service.

Related pages

Surface RT/Pro 版本Windows 8 QQ下载与安装

2681 views   0 comments last modified about 5 years ago

Surface的用户可能会遇到一个难题,在应用商城里边无法搜索到QQ应用程序。但是让我疑惑的是,我的Windows 8.1 系统之前是成功安装了QQ。

后来在腾讯QQ下载官网发现,其实是有QQ应用安装的链接:

按照如下方法安装Surface QQ.

Have fun!

image

View detail

my first begining with Windows 7

141 views   0 comments last modified about 9 years ago

Maybe it is a little late now due to busy work,anyhow,it is better to do lately than never to do.

View detail

[教程]在Windows Phone 程序中使用LINQ to XML以及执行数据绑定

301 views   0 comments last modified about 7 years ago


LINQ是Language Integrated Query的简写,中文名称是语言集成查询,它是一组技术的组合,包括LINQ to DataSet(typed 以及untyped),LINQ to SQL(适用于SQL Server数据库),LINQ to XML(包括内存中以及XML文件中的数据),LINQ to Object,LINQ to Entities(结合Entity Framework使用)等。这些技术建立在将查询功能直接集成到 C# 语言(以及 Visual Basic 和可能的任何其他 .NET 语言)的基础上。借助于 LINQ,查询现在已是高级语言构造,就如同类、方法、事件等等。具体参考MSDN文档介绍View detail

SVN 中文子目录权限失效的解决方案

324 views   0 comments last modified about 9 years ago

svn对于非英文文件名和目录名使用utf-8格式编码处理,要对中文目录进行正确控制,
对于authz文件应该使用无BOM的utf-8格式,如何将默认的文件转为utf-8?可以使用UltraEdit编辑器存储的时候把格式选择“UTF-8 无BOM”;

View detail

LINQ to SQL in Windows Phone 7 Error: An overflow occurred while converting to datetime.

494 views   0 comments last modified about 7 years ago

Resolve the issue in Linq to SQL in Windows Phone 7 App:
An overflow occurred while converting to datetime.

View detail

Add comment

Please login first to add comments.  Log in New user?  Register

Comments (3)

R re: Using Bing Maps Control in Windows Phone Applications

Ra*** about 7 years ago

Thank u :)
RC re: Using Bing Maps Control in Windows Phone Applications

Rume*** about 7 years ago

This is nice article so far I've read online, thanks for sharing with us. I really appreciate you, keep writing. I was found some other good articles too which also explained very well about Bing Map Control in Windows Phone development. For more details on that posts check out the following url.....
www.mindstick.com/...
f5debug.net/...

Thanks everyone for your precious post.
MM re: Using Bing Maps Control in Windows Phone Applications

miu miu *** about 7 years ago

This is worth sharing, this site did a good job, my site is also