Bing map Learning Series (2) -- how to display a map through Bing Maps Silverlight Control

Document directory

• 1. Create a Silverlight Project
• 2. display a map using Bing Maps Silverlight Control
• Iii. Other functional attributes

Previous Article Bing map Learning Series (1) -- preparations before development> development environment of map and some preparations, this includes downloading related software and preparing Bing map key.

Thanks to author: http://www.cnblogs.com/beniao/archive/2009/11/24/1608284.html

What is the key used? The Silverlight control is an essential parameter for map rendering. It can be understood as Microsoft Bing maps, which is an authorization Development Key activated by users, this article attempts to use a simple example drill project to learn how the Bing Maps control uses this key to display maps.

1. Create a Silverlight Project

1. Create a Silverlight project in Visual Studio 2008 SP1. The created solution is as follows:

Note: The solution includes bingmaps and bingmaps. Web. You must set bingmaps to a startup project before running.

2. When the new Silverlight application dialog box is displayed, make sure that the host the Silverlight application in a new web site option is selected because URL access is strictly controlled in Silverlight, your web page must use HTTP rules to access Bing map.

2. display a map using Bing Maps Silverlight Control

1. Add references as follows:

In bingmaps, choose reference> Add reference> browse> Find the two DLL files under the Bing Maps Silverlight control SDK directory. Microsoft. Maps. mapcontrol. Common. dll and Microsoft. Maps. mapcontrol. dll are introduced to the Silverlight project created above.

2. Modify mainpage. XAML

Then open mainpage. the source attempt of XAML allows you to introduce Bing Maps Silverlight control to the current Silverlight page through the namespace. The following code example (note that the value of credentialsprovider is the Bing map key you created earlier ), at the same time, to display the map, add the content of the <m: Map> </M: Map> node. The Code is as follows:

<Usercontrol X: class = "silverlightapplication1.mainpage" <br/> xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" <br/> xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" <br/> xmlns: M = "CLR-namespace: Microsoft. maps. mapcontrol; Assembly = Microsoft. maps. mapcontrol "<br/> xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "<br/> xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "<br/> MC: ignorable =" D "D: designwidth = "640" D: designheight = "480"> </P> <p> <grid X: Name = "layoutroot"> <br/> <m: map credentialsprovider = "AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" <br/> navigationvisibility = "Collapsed" <br/> width = "500" <br/> Height = "500"> <br/> </ m: map> <br/> </GRID> <br/> </usercontrol> </P> <p>

In the map control (MAP), credentialsprovider is the key we used to create through the Bing Maps Account Management Center. The width and height attribute values are used to determine the width and height of the map control. Compile and start the program to preview it,

Warning: If you access the page information in the following ways:

File: // D:/codes/silverlightapplication1/silverlightapplication1/bin/debug/testpage.html

Your page will display: map loaded in unsupported URL scheme. please reload page in "HTTP" Scheme

This message indicates that you must pass the HTTP protocol to display the Bing Maps you have created. Otherwise, an error will occur (so it is best to install IIS on your PC, otherwise, an error message is displayed when you directly run the Silverlight project ).

After the compilation is successful, the default map is successfully displayed through Bing Maps Silverlight control, as shown in:

While displaying the default image, I received a notice of employment from Zoomlion, both of which made me very excited. I need to calm down and wait until I write the subsequent content.

Come back calmly and continue learning. The default display of the above image obviously cannot meet the user's needs. So how do we customize the image we need? First, you must understand the relevant attributes.

Iii. Other functional attributes

1. navigationvisibility attributes

If there is a navigation toolbar for the map in the upper-left corner of the map, you can use the navigationvisibility attribute of the map control to set whether to display the navigation function. The settings are as follows:

<M: map credentialsprovider = "AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" <br/> navigationvisibility = "Collapsed" <br/> width = "500" <br/> Height = "500"> <br/> </ m: map>

2. mode attribute

You can also set the map display mode, which can be road or satellite. The control is loaded into road condition by default, the following code uses the road mode:
<M: map credentialsprovider = "AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" name = "map" <br/> width = "500" Height = "500" mode = "road"> <br/> </m: map>

If the mode is set to "Aerial", the map is loaded in satellite mode, and aerial is in non-lustful satellite mode. to display the road signs, you need to use "aerialwithlabels" to load the map. The following code:

<M: map credentialsprovider = "AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" name = "map" <br/> width = "500" Height = "500" mode = "aerialwithlabels"> <br/> </m: map>

3. Other attributes

We can also set a slow effect for the road sign. When the mouse points to the road sign, the road sign is displayed slowly and hidden slowly after leaving. The Code is as follows:

<M: Map credentialsprovider = "AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" name = "map" <br/> center = "37.806029,-122.407007"> <br/> <m: map. mode> <br/> <m: aerialmode labels = "true" fadinglabels = "true"/> <br/> </M: map. mode> <br/> </M: Map>

Currently, we can only display maps, and then customize our own Bing Maps project through some attribute values. But we are faced with a new problem: how do we control maps? The next chapter will provide specific answers.