Win8.1 app Development Bing Maps

This article describes how to develop Bing maps. First we need to introduce the Bing Map SDK into our program. Specifically, here is a link <win8> use of Bing Maps. Such a Hello world would come out. Here we mainly introduce some basic APIs to do some foundational development.

What impressed me most in the development was that, in the rare case of online data, looking at the API given by Bing Maps was the most effective method (Map API). Perhaps the API comments are ambiguous, but as long as we try, we can understand the functions of these methods.

If you encounter Hello World and cannot display the map, add mymap.homeregion = "US" in the constructor method of the class in the C # file (Mymap is the map defined in XAML, as shown in the sample code below)

Using windows.ui;using windows.ui.popups;using windows.ui.xaml;using windows.ui.xaml.controls;using Windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using windows.ui.xaml.navigation;//"Blank page" item template in http://go.microsoft.com/fwlink/? linkid=234238 on the namespace demo02{    ////<summary>//////for self or to navigate to a blank page inside the Frame.    ///</summary> public sealed partial class Bingmap:page    {public        bingmap ()        {this            . InitializeComponent ();            Mymap.homeregion = "US";}}}

(a) Add a pushpin:

<page x:class= "demo02. Bingmap "xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns:x=" http://schemas.microsoft.com /winfx/2006/xaml "xmlns:local=" using:demo02 "xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "xmlns:m C= "http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:bm= "Using:Bing.Maps" xmlns:m= " CLR-NAMESPACE:MICROSOFT.MAPS.MAPCONTROL.WPF;ASSEMBLY=MICROSOFT.MAPS.MAPCONTROL.WPF "mc:Ignorable=" D "> < Grid background= "{ThemeResource Applicationpagebackgroundthemebrush}" > <bm:map credentials= "ajootbefxeb3vjcf yeteqh3tesw_gf0_r5n54lbyg7phbzwpvgumusmcczxymx--"x:name=" MyMap "> <bm:Map.Center> <b M:location latitude= "37.52" longitude= "121.39"/> </bm:Map.Center> <bm:map.                        children> <bm:pushpin tapped= "jinantapped" > <bm:MapLayer.Position> <bm: Location latitude= "36.65" longitude= "117"/> </bm:MapLayer.Position> </bm:p                        ushpin> <bm:pushpin tapped= "beijingtapped" > <bm:MapLayer.Position> <bm:location latitude= "39.92" longitude= "116.46"/> </bm:maplayer.position&gt                ;                    </bm:Pushpin> <bm:pushpin tapped= "guangzhoutapped" >                                           <bm:MapLayer.Position> <bm:location latitude= "23.16" longitude= "113.23"/>                            </bm:MapLayer.Position> </bm:Pushpin> </bm:Map.Children> </bm:Map> </Grid> </Page>

Xmlns:bm= "Using:Bing.Maps" introduces the SDK to the program. Pushpin is a pushpin, tapped is the way to click on the Pushpin to trigger the method, defined in the C # file. The Location property has latitude and longitude, which is the coordinates of the Pushpin on the map. In addition to statically setting Pushpins in XAML, we can also dynamically add them programmatically.

Using Bing.maps;using demo02. Datastructure;using system;using system.collections.generic;using system.io;using System.Linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui;using windows.ui.popups;using windows.ui.xaml;using windows.ui.xaml.controls;using Windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using windows.ui.xaml.navigation;//"Blank page" item template in http://go.microsoft.com/fwlink/?    linkid=234238 on the namespace demo02{////<summary>//////for self or to navigate to a blank page inside the Frame. </summary> public sealed partial class Bingmap:page {public Bingmap () {this.i            Nitializecomponent ();            Mymap.homeregion = "US"; Mymap.setzoomlevel (4.3, mapanimationduration.none);         Set the zoom scale so that the map zooms in to the desired area, and now the entire picture is displayed in the Chinese region//with the Code pushpin//pushpin labeled North China var pushpin = new Pushpin ();    Tooltipservice.settooltip (pushpin, "Beijing"); Mouse on the Pushpin will appear on the text hint Maplayer.setposition (pushpin, new location (39.92, 116.46)); The latitude and longitude of the Pushpin Pushpin. Tapped + = bjtapped;        Click on the PIN Trigger method MyMap.Children.Add (pushpin); private void Bjtapped (object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) {Mymap.map Type = Maptype.birdseye;            Set Bird's Eye mode location location = new location (); Beijing latitude and longitude location.            Latitude = 39.92; Location.            longitude = 116.46; Mymap.setview (location, 12);            Enlarge the view to the Beijing area//use Pushpin to Mark Peking University var pushpin = new Pushpin ();            Tooltipservice.settooltip (Pushpin, "Peking University Peking University");            Maplayer.setposition (Pushpin, new location (39.9890077, 116.302251));            MYMAP.CHILDREN.ADD (pushpin);            Use Pushpin to Mark Tsinghua University var Pushpin01 = new Pushpin ();        Tooltipservice.settooltip (Pushpin01, "Tsinghua University Tsinghua University");    Maplayer.setposition (Pushpin01, new location (40.000531, 116.326319));        MYMAP.CHILDREN.ADD (PUSHPIN01); }}}

Maybe it's not a good idea to display the text on a Pushpin, like a pushpin is an attraction, and when we move the mouse over it, it's best to have a photo. You can then use style styles.

Add the following in App.xaml:

<style targettype= "ToolTip" x:key= "Okstyle" > <setter property= "Background" value= "Transparent"/&                Gt  <setter property= "BorderBrush" value= "Transparent"/> <setter property= "borderthickness" Value= "0" /> <setter property= "Template" > <Setter.Value> &L T Controltemplate> <border cornerradius= "5" > <border.b                                ackground> <solidcolorbrush color= "Black" opacity= "0.5"/>                                    </Border.Background> <contentpresenter margin= "5" > <ContentPresenter.Content> <stackpanel margin= "5" Maxwid Th= "minheight=" > <textblock text= "Shandong University Shandong UNIVERSITY" Font SizE= "foreground=" white "/> <image source=" images/ec/sd/sdu/sdu.jpg "Grid .                                    columnspan= "5" margin= "0,0,0,10" stretch= "Fill"/> </StackPanel>                            </ContentPresenter.Content> </ContentPresenter> </Border> </ControlTemplate> </setter.value > </Setter> </Style>

Location is:

<application x:class= "demo02. App "xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns:x=" http://schemas.microsoft.com/ Winfx/2006/xaml "xmlns:local=" using:demo02 "Xmlns:rssdata=" using:demo02. Easyaccess.rssreader "Xmlns:localdata=" using:demo02. Data > <Application.Resources> <!--application-specific resources-<!--<x:string x:key= "AppName" >wh                Erewego</x:string>--> <ResourceDictionary> <ResourceDictionary.MergedDictionaries>                    <!--Styles that define common aspects of the platform look and feel Required by Visual Studio Project and item Templates-<!--<resourcedictiona Ry source= "Common/standardstyles.xaml"/>--> <!--Add app resurces to this resource dictionary--&G                T <ResourceDictionary> <rssdata:feeddatasource x:key= "FeeddatasOurce "/> <!--Add the dateconverter here. -<!--<rssdata:dateconverter x:key= "DateConverter"/>--> </resourced ictionary> </ResourceDictionary.MergedDictionaries> <style targettype= "ToolTip" x:key= " Okstyle "> <setter property=" Background "value=" Transparent "/> <setter property=                "BorderBrush" value= "Transparent"/> <setter property= "borderthickness" value= "0"/> <setter property= "Template" > <Setter.Value> <controltemplate&gt                            ;                                    <border cornerradius= "5" > <Border.Background>                                <solidcolorbrush color= "Black" opacity= "0.5"/> </Border.Background> <contentpresenter margin="5" > <ContentPresenter.Content> <sta Ckpanel margin= "5" maxwidth= "minheight=" > <textblock text= "Shandong University S Handong UNIVERSITY "fontsize=" foreground= "white"/> <image source= "Im                                        Ages/ec/sd/sdu/sdu.jpg "grid.columnspan=" 5 "margin=" 0,0,0,10 "stretch=" Fill "/> </StackPanel> </ContentPresenter.Content> &L                    T;/contentpresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </resourcedictionary&    Gt </Application.Resources></Application>

So the style is defined, and then you see how to use it:

Use Pushpin to mark Shandong University 36.677549,117.054218            var pushpin = new Pushpin ();            Tooltipservice.settooltip (Pushpin, "Shandong University");            Tooltipservice.settooltip (Pushpin, New ToolTip ()            {                style = application.current.resources["Okstyle"] as Style            });            Maplayer.setposition (Pushpin, new location (36.677549, 117.054218));            Pushpin. Tapped + = sdu01tapped;            MYMAP.CHILDREN.ADD (pushpin);

(b) Connection:

There's a point, and here's the line that can depict a specified area. The following code connects the six campuses of the Alexandria Jinan. (PS: You can get the API for a location from Google Maps by placing your mouse in a location and right-clicking on "Where is this?" "The exact latitude and longitude will appear in the search box.")

Connecting the six major campuses maplayer Mpinlayer = new Maplayer ();            MYMAP.CHILDREN.ADD (Mpinlayer);            Mapshapelayer Mshapelayer = new Mapshapelayer (); MYMAP.SHAPELAYERS.ADD (Mshapelayer);//define the point to be connected locationcollection mPolyShapeLocations01 = new Locationcollectio            N (); Mpolyshapelocations01.add (new location (36.666818, 117.133137)); Software Park Mpolyshapelocations01.add (new location (36.68525, 117.060184)); Hong Jia Lou Mpolyshapelocations01.add (new location (36.678625, 117.050547)); Center Mpolyshapelocations01.add (New location (36.650681, 117.013094)); Baotu Spring Mpolyshapelocations01.add (new location (36.650414, 117.022868)); Thousand Foshan mpolyshapelocations01.add (new location (36.602489, 117.049045)); Xinglong Mountain Mpolyshapelocations01.add (new location (36.666818, 117.133137)); Software Park for (int i = 0; i < Mpolyshapelocations01.count; i++) {pushpin pin = new Pu              Shpin ();  Pin.                Text = i.ToString ();                MPINLAYER.CHILDREN.ADD (PIN);            Maplayer.setposition (PIN, mpolyshapelocations01[i]);            }//mappolylines is a wired API that connects the points defined above mappolyline polyline01 = new Mappolyline (); Polyline01.            Color = Windows.UI.Colors.Red; Polyline01.            Locations = mPolyShapeLocations01; Polyline01.            Width = 5.0; MSHAPELAYER.SHAPES.ADD (POLYLINE01);