使用silverlight制作熱點地圖

參考文檔：http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots

 目前網絡上關于熱點地圖的實作大多數都是通過flash實作的，在這裡我記錄下通過silverlight實作的方法。

需求：

1. MainPage加載時展示世界地圖，滑鼠移動大洲區域變色突出顯示。
2. 顯示滑鼠停留大洲所擁有的旅行線路條數，點選國家button進入相應搜尋結果頁。
3. 點選大洲進入相應大洲的界面，該頁面與MainPage類似，滑鼠移入時顯示結果略有不同，為該國家所擁有的線路名稱與天數，即價格等。點選連結進入相應産品頁。

截圖如下：

 (MainPage)

 （大洲頁，顯示産品相關資訊）

 開發工具：

visual studio 2010、Microsoft expression design4 (主要拿來切圖用，即用鋼筆工具描出國家或者大洲的邊界，工具生成的代碼可以直接用在xaml檔案中，具體用法見此處http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-Hotspots寫的很詳細)

關鍵部分代碼：

實作滑鼠移動時目标區域變色功能

void addMapEvents()
        {
            foreach (Canvas c in (this.FindName("map__matsuri") as Canvas).Children)
            {
                if (!string.IsNullOrEmpty(c.Name))
                { 
                    c.MouseMove+=new MouseEventHandler(on_mouseMove);
                  
                    c.MouseLeftButtonUp += new MouseButtonEventHandler(c_MouseLeftButtonUp);
                }
            }
        }
           

　　綁定滑鼠移動的事件（如需在頁面加載後就有此功能需将addMapEvents方法添加到頁面的構造函數當中）

void on_mouseMove(object sender, MouseEventArgs e)
        {
            Canvas c = sender as Canvas;
            ResetLastSelected();
            if (!string.IsNullOrEmpty(c.Name))
            {
                if (c.Name != lastSelected)
                {
                    HideMenu();
                }
                lastSelected = c.Name;
                SetupLinks();
                SetCanvasColor(c, Colors.Blue, 2, Colors.Black);
            }

          
            if (!string.IsNullOrEmpty(c.Name))
            {
                PopulateContextMenu(c.Name);
                PositionContextMenu(e.GetPosition(contextMenu.Parent as UIElement), true);
            }
          
        }
           

　　滑鼠移動，區域變色的具體實作。SetCanvasColor(c, Colors.Blue, 2, Colors.Black); 其中在世界地圖這個層面這裡的canvas即為每個大洲。看到這裡應該就比較清楚了，這種實作方式就是把一個世界地圖用expression design描出每一個大洲的邊界(每一個大洲即為一個canvas)然後在滑鼠移動的時候判斷是在哪一個canvas上，并着色。

顯示線路資訊的解決辦法

在這裡分為兩方面：

1. silverlight讀取資料庫資訊。
2. 彈出/關閉菜單的動畫效果。

關于silverlight讀取資料庫資訊，開始我習慣性的找system.data，突然發現沒有了（一番搜尋之後才意識到silverlight是用戶端程式不能直接通路資料庫，一般都是采用webservice或是ria等通路的在本程式中我采用的是webservice這裡沒有太多可說的，需要注意的就是當修改了webservice服務中的方法後，silverlight端需要重新引用才能生效，否則會出現找不到新添加方法的情況。）

彈出/關閉菜單的動畫效果代碼如下，

<Storyboard x:Name="HidePopup">
                <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="GridMenu" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="ShowPopup">
                <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="GridMenu" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
           

　　同樣的需要在背景綁定滑鼠左鍵點選事件：LayoutRoot.MouseLeftButtonUp += new MouseButtonEventHandler(LayoutRoot_MouseLeftButtonUp);

然後顯示的資料從資料庫中讀取，對button或者HyperlinkButton進行指派即可。

 開發過程中碰到的很窘的問題：在調試的時候發現不論怎麼下斷點都不會中斷，最後才發現不知道什麼時候把firefox設定成為預設浏覽器了，然後各種不中斷，換回IE即可，希望碰到跟我相同問題的朋友不會像我一樣苦苦掙紮半個多小時。

轉載于:https://www.cnblogs.com/falcon-fei/archive/2012/08/06/2453531.html