Win8.1 app Development Bing Maps

Here's how to develop Bing maps. First, we need to introduce the Bing Map SDK into our program. Detailed method, here is recommended a link <win8> use Bing Maps. Such a Hello world would come out. Here are some of the main APIs. For some basic development.

In the whole development, the deepest feeling to me is. In the case of scarce online information. Looking at the API given by Bing Map is the most effective method (Map API).

Maybe the API stare is ambiguous, but we just have to try. To understand the capabilities of these methods.

Assuming Hello world does not show the map, add mymap.homeregion = "US" to the constructor of the class in the C # file (Mymap is a map defined in XAML, see the Demo sample code below for details)

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 Pushpins:

<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 trigger. method is defined in the C # file. Location attributes have latitude and longitude. This is the coordinate of the Pushpin on the map. In addition to statically setting Pushpins in XAML, we are able to dynamically join by programming.

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); Sets the scale scale.        So the map will zoom in to the desired area, now the entire picture is displayed in the Chinese region//with 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 top view 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); }}}

It may not be comfortable to display the text that the mouse has moved over the Pushpin. For example, a Pushpin is a place of attraction, and when we move the mouse over it, it's best to have a photo.

You can then use style styles.

Add for example 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. Next look at how to use:

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 is a point, the following is the line. Can depict a specified area.

The following code connects the six campuses of the Alexandria Jinan.

(PS: The ability to get an API for a location via Google Maps by placing the mouse at 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);

Win8.1 app Development Bing Maps