星期日, 1月 29, 2012

[Expression Blend ] 如何使用Bing Maps (4) 客製化圖釘,凸顯標示位置

000
原本預設圖釘樣式:  



        影像 002
我們可以試著,設計自己的花樣圖釘,更顯自己特色。

KT這邊簡單的,畫一個圖樣來示範。

如:一個漸層向下的箭頭,裡面文字填入MS(代表微軟)如:

影像 004

然後將此圖案轉成路徑,
在圖案上(自己動手畫一個圖案),按右鍵=>路徑=>轉換成路徑
Photobucket


然後新增一個Canvas
Photobucket


將剛剛箭頭圖案轉成的路徑文字(MS)放置到這個Canvas底下
然後Canvas放到Map底下
Photobucket

KT這邊將圖釘,標示位置在台灣微軟:25.038502,121.568763


XAML code如下:
<!-- Map 控制項 -->
  <m:Map ZoomLevel="15" Center="25.038502,121.568763" Foreground="#FF5A91F3">
       <!-- Canvas -->
     <Canvas  Height="80" m:MapLayer.Position="25.038502,121.568763" m:MapLayer.PositionOrigin="BottomCenter" Opacity="0.7" Margin="-33,5,-49,-5" d:LayoutOverrides="HorizontalAlignment">
                <!-- 將圖案轉成 Path -->
    <Path Data="M34,67.5 L1,34.5 L17.5,34.5 L17.5,1 L50.5,1 L50.5,34.5 L67,34.5 z" HorizontalAlignment="Right" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" Width="84.5" Height="78.488" Canvas.Left="-1.202" RenderTransformOrigin="0.5,0.5" Canvas.Top="1">
       <Path.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FF417FF0" Offset="0.442"/>
         <GradientStop Color="#FFEC4C10" Offset="0.998"/>
        </LinearGradientBrush>
       </Path.Fill>                  
      </Path>
      <TextBlock FontSize="14.667" Foreground="White" TextAlignment="Center" Text="MS
" Canvas.Left="20" Canvas.Top="17" Height="28" Width="41"/>
            </Canvas> 
  </m:Map>

關鍵點在於:

1.指定圖案的位置(指到我們這次的目標:台灣微軟):
m:MapLayer.Position="25.038502,121.568763"

2.指定圖案底下中心點位置(剛好是箭頭尖尖的地方)為標示位置:
m:MapLayer.PositionOrigin="BottomCenter"


執行結果:




  • 影片教學





範例原始碼下載: 

(此範例檔未附上KT的開發Key,所以要填入自己的開發Key喔!!!)  



更多詳細資料可參考:


(微軟官方相當豐富的範例:Demo效果+原始碼)





0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]