[Silverlight] Bing Maps Learning Series (4): using the Pushpin layer and MapLayer)

Source: Internet
Author: User
If we need to add a small graph dingtalk tag to Bing Maps, how can we achieve this? The Bing Maps control has provided us with this function. maps. in the MapControl namespace, the Pushpin class is provided to implement the graph nailing application. For example, we can use the following method to locate the position of a graph ordering layer on the map:

Code

1 double longpolling = double. Parse ("47.620574 ");
2 double latitude = double. Parse ("-122.34942 ");
3
4 Pushpin pushpin = new Pushpin ();
5 pushpin. Location = new Location (latitude, longpolling );

 

The Location class introduced in the previous article from which you can read and locate or use it. Remember it again ~~~~ Then, how to add it to the map is actually very simple. The Bing Maps map control directly provides the graph nail layer, which can be added to the graph subscription layer through the embedded method, by default, the graphic tags provided by Bing Maps are used.

Code

1 <m: Map CredentialsProvider = "batch" x: Name = "map"
2 Center = "33.845881352, 105.165628188471" ZoomLevel = "6.0">
3 <m: Pushpin Location = "33.845881352, 105.165628188471"> </m: Pushpin>
4 </m: Map>

 

Yes. It's so easy to add a graph nail layer to the map and directly locate it on the coordinates of 33.845881352 and 105.165628188471. Do you know where the coordinates are? He is in China. If not, you can look at the following:

            

 

Through the above steps, we have successfully added a small map nail layer to the map. In addition to adding a map nail, we can also customize the map to add images, images, videos, etc, to add images, images, videos, and other data to a map, use the map layer provided by Bing Maps as follows:

Code

1 <m: Map CredentialsProvider = "batch" x: Name = "map"
2 Center = "33.845881352, 105.165628188471" ZoomLevel = "6.0">
3 <m: Pushpin Location = "33.845881352, 105.165628188471" x: Name = "mayPushpin"> </m: Pushpin>
4 <m: MapLayer x: Name = "myMapLayer"> </m: MapLayer>
5 </m: Map>

  

As shown above, a blank map layer is added to the map. Next, you can use the program to dynamically add what you want to add to the map layer. For example, we have located the China Map area above, can we add the Chinese flag to a map next? The answer is yes. How can this problem be solved?

Code

1 private void btnAddPushpin_Click (object sender, RoutedEventArgs e)
2 {
3 double longpolling = double. Parse (this. tbLongitude2.Text. Trim ());
4 double latitude = double. Parse (this. tbLatitude2.Text. Trim ());
5
6 Location location = new Location (latitude, longpolling );
7
8 Image image = new Image ();
9 image. Source = new BitmapImage (new Uri ("http: // localhost: 2986/Images/China.jpg", UriKind. RelativeOrAbsolute ));
10 image. Stretch = Stretch. None;
11 image. ImageFailed + = delegate (object senders, ExceptionRoutedEventArgs ex)
12 {};
13 PositionOrigin position = new PositionOrigin (1.0, 1.0 );
14
15 this. myMapLayer. AddChild (image, location, position );
16}

 

Similarly, you can use Location to locate the accuracy and latitude of coordinates, and add the Image sequence as an Image object to the map layer as a display object. The effect is as follows:

          

 

OK. The Chinese flag is successfully added to the map !~~~~~ The complete Silverlight code is as follows:

Code

1 <UserControl x: Class = "PushpinLayer. MainPage"
2 xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns: m = "clr-namespace: Microsoft. Maps. MapControl; assembly = Microsoft. Maps. MapControl"
5 xmlns: d = "http://schemas.microsoft.com/expression/blend/2008" xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc: Ignorable = "d" d: DesignWidth = "500" d: DesignHeight = "500">
7 <Grid x: Name = "LayoutRoot" Width = "500" Height = "500">
8 <m: Map CredentialsProvider = "batch" x: Name = "map"
9 Center = "33.845881352, 105.165628188471" ZoomLevel = "6.0">
10 <m: Pushpin Location = "33.845881352, 105.165628188471" x: Name = "mayPushpin"> </m: Pushpin>
11 <m: MapLayer x: Name = "myMapLayer"> </m: MapLayer>
12 </m: Map>
13 <StackPanel HorizontalAlignment = "Left" VerticalAlignment = "Bottom" Width = "180" Height = "200" Background = "Gray">
14 <TextBlock Text = "precision:"> </TextBlock>
15 <TextBox x: Name = "tblong.pdf"> </TextBox>
16 <TextBlock Text = "latitude:"> </TextBlock>
17 <TextBox x: Name = "tbLatitude"> </TextBox>
18 <TextBlock Text = ""> </TextBlock>
19 <TextBlock Text = "precision:"> </TextBlock>
20 <TextBox x: Name = "tbLongitude2"> </TextBox>
21 <TextBlock Text = "latitude:"> </TextBlock>
22 <TextBox x: Name = "tbLatitude2"> </TextBox>
23 <Button x: Name = "btnAddPushpin" Click = "btnAddPushpin_Click" Content = "add a five-star red flag"> </Button>
24 </StackPanel>
25 </Grid>
26 </UserControl>
27

 

 

This article will introduce you here for more details. For more details, refer to the official development of Silverlight and Bing Maps ~~~

 

 

Description

This document is a learning note and is intended to be shared with people with lofty ideals. You are welcome to repost this article, but mark the original article connection in a prominent position.

Author: Beniao

Article Source: http://beniao.cnblogs.com/or http://www.cnblogs.com/

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.