Bing Maps Draggable Pushpin

Bing maps està completament integrat a les tecnologíes de .Net com ASP.NET, WPF, Silverlight i Windows Phone. L’ús de la API és molt senzill.

Per començar a treballar amb ella primer necessites descarregar-te l’SDK de Bing Maps i aconseguir la teva clau de desenvolupador gratuitament.

Tota la informació i els passos a seguir els trobeu aqui: Bing Maps for Developers

En el cas que m’ocupa aquesta entrada vull parlar del control Pushpin de l’espai de noms Microsoft.Phone.Controls.Maps en Windows Phone.

Des de la pàgina de Microsoft pots trobar la informació de com es treballa amb els Pushpins i creume que no és gens complicat. Aqui tens una part de codi amb XAML que et permet incloure una llista de Pushpins enllaçada a una font de dades.

<my:Map  Name="map1" ZoomBarVisibility="Visible" ZoomLevel="16" Center="{Binding Location}">
    <my:MapLayer Visibility="{Binding VisibilityLayer}">
       <my:MapItemsControl ItemsSource="{Binding LlistaPushpins}">
           <my:MapItemsControl.ItemTemplate>
              <DataTemplate>
                <my:Pushpin Content="{Binding Contingut}" Location="{Binding Location}" >
                </my:Pushpin>
              </DataTemplate>
           </my:MapItemsControl.ItemTemplate>
       </my:MapItemsControl>
    </my:MapLayer>
</my:Map>

El que no et fa la SDK estàndard del Bing és poder arrosegar un Pushpin de un punt a un altre del mapa. Per sort la comunitat ja ha resolt aquest problema i penso jo d’una manera molt nítida si ens fixem en la resolució proposada al següent enllaç:

Draggable PushPins

Simplement es tracta de crear una clase que hereda de Behavior<Pushpin> que s’adjunta a l’event MouseLeftButtonDown per accedir a la propietat Location del Pushpin i assignar-l’hi la posició del mouse respecte l’area que ocupa el mapa.

El codi en XAML que has d’utilitzar després és simplement:

<my:Map  Name="map1" ZoomBarVisibility="Visible" ZoomLevel="16" Center="{Binding Location}">
<my:MapLayer >
     <my:Pushpin Location="{Binding Location,Mode=TwoWay}" Style="{StaticResource PushpinStyle2}" >
          <interactivity:Interaction.Behaviors>
               <behavior:DraggablePushpin />
          </interactivity:Interaction.Behaviors>
     </my:Pushpin>
</my:MapLayer>
</my:Map>

El resultat és el següent si seguim el que indica el post que faig referència:

1) Punt inicial del Pushpin

2) Desplaçar per el mapa (Drag)

3) Avís de canvi de ubicació

4) Pushpin canviat

Més informació:

Draggable PushPins

Draggable Pushpins using Bing Maps Silverlight Control

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s