Use of the bingmap control in Windows Phone 7

When using bingmap, You need to verify the accesskey. Therefore, we should first register on the bingmap official website. Registration is free of charge. Without a verification key, you cannot obtain the bingmap service from the web.

Register the bingmap website for the key:

Https://www.bingmapsportal.com

If you do not have a Windows Live ID, you must first register a live ID account (Click Create). If you already have a live ID account, log on directly (sign in ).

After logging on, click Create or view keys

Then enter the key registration page. Enter the corresponding information and click OK to obtain the key value. Save this key and use it later. Only with this key can we use various bingmap functions.

After registration, the following describes how to use the bingmap control.

I.UseMapControl display Map

Create a project and add a map control. TheMicrosoft. Phone. Controls. MapsNamespace reference.

After it is added, the following code is automatically generated in the mainpage. XAML file:

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0"> <! -The following code is automatically generated by adding the map control --> <my: Map Height = "519" horizontalalignment = "Left" margin =, 450 "name =" bingmap "verticalignment =" TOP "width =" "<! -Credentialsprovider is the key we have registered. The map control does not automatically generate this code and needs to be added by ourselves, enter the applied key --> credentialsprovider = "Courier"> </My: Map> </GRID>

After the above work is completed, run the program and we can see the map. The following is the running View:

2. Add the map scaling function

First, add an ApplicationBar and add two buttons as follows:

<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="Images/zoom-in.png" Text="ZoomIn" Click="ZoomInButton_Click"/>            <shell:ApplicationBarIconButton IconUri="Images/zoom-out.png" Text="ZoomOut" Click="ZoomOutButton_Click"/>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>

Then add the following code in the response function of the Click Event of the button:

// The zoomlevel of bingmap indicates the view precision of the map. It is a double-type value private void zoominbutton_click (Object sender, eventargs e) {++ bingmap. zoomlevel;} private void zoomoutbutton_click (Object sender, eventargs e) {-- bingmap. zoomlevel ;}

After completing the preceding steps, we scaled the map. The running view is as follows:

3. Add map and satellite view Functions

We added two menuitems to ApplicationBar. The Code is as follows:

<Shell: ApplicationBar. menuitems> <shell: applicationbarmenuitem text = "click" Click = "aerialmenuitem_click"/> <shell: applicationbarmenuitem text = "map view" Click = "roadmenuitem_click"/> </shell: applicationBar. menuitems>

Then we compile their click events. The Code is as follows:

Private void roadmenuitem_click (Object sender, eventargs e) {bingmap. mode = new roadmode ();} private void aerialmenuitem_click (Object sender, eventargs e) {// aerialmode has two function overloading functions. When set to true, some map information is displayed, // For example, highway or name. // When it is set to false, only the landform information is displayed, and no other redundant display bingmap. mode = new aerialmode (true );}

This is the running effect view:

4. added the map center locating function.

By setting the longitude and latitude coordinates and map resolution, you can implement the above functions. First, we add a menuitem named positioning center and add a click event.

Next we will go to mainpage. XAML to compile its event response function. The Code is as follows:

Private void centermenuitem_click (Object sender, eventargs e) {// two methods // bingmap. center = new system. device. location. geocoordinate (42.1,-122.8); // bingmap. zoomlevel = 15; // setview has two parameters: one is the longitude and latitude of the positioning coordinate, and the other is the resolution size bingmap displayed on the map. setview (New geocoordinate (42.1,-122.8), 1000 );}

Here, the coordinate points of the above positioning are set here. In real applications, location service is generally used to obtain the coordinates of users or other geographical locations, then, it is substituted into the setview to implement the location replacement function.

5. Add Map icon

Add a button in ApplicationBar. The Code is as follows:

<shell:ApplicationBarIconButton IconUri="Images/pushbing.png" Text="PushBing" Click="PushBingButton_Click"/>

Then, enter the Click Event response function. The Code is as follows:

Private void pushbingbutton_click (Object sender, eventargs e) {// create a new layer. We use this layer to add the map we want to use. The map is maplayer = new maplayer (); // After the layer is created, we need to add it to our map to bingmap. children. add (maplayer); // After the preparation is complete, we will start to create a new graph. pushpin pushbing = new pushpin () {// location = new geocoordinate (41.8000, 123.38333), // content displayed by the dingtalk is "Shenyang "}; // Add the map to the layer to indicate a geographical position of the maplayer. children. add (pushbing );}

We have added a map nail. We can also add other elements, such as an image (the path of the image needs to be specified here) or multiple map nails. After the element is created, you only need to add it to the layer.

Below is the running:

Finally, we recommend a bingmap website with many resources and examples.

 

Http://www.microsoft.com/maps/isdk/silverlight/

We recommend that you take a look at the above content by referring to the video of Jake Lin. I believe it will be helpful.

(All Rights Reserved. For details, refer to the source)