使用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即可，希望碰到跟我相同问题的朋友不会像我一样苦苦挣扎半个多小时。