學習使用Bing Maps Silverlight Control（六）：自訂“鷹眼”地圖

8 “鷹眼”地圖

在電子地圖中，用於顯示當前視窗在全圖中的位置，當前視窗換圖時，鷹眼自動進行相應變化。鷹眼進行漫遊。通過改變鷹眼中視窗位置可改變相應的主視窗地圖顯示地區。——百度百科

實現鷹眼地圖實際上就是一個小尺寸的Bing Maps控制項，並利用 7 自訂顯示範圍 中的自訂Map Mode 限制地圖的縮放層級和顯示範圍。

首先，自訂一個適用於小尺寸地圖顯示的Mode，通過繼承並限制ChinaMode的縮放層級來達到小地圖的效果：

/// <summary>/// 中國地圖的小地圖模式/// </summary>public class ChinaMiniMode : ChinaMode{    public ChinaMiniMode()    {        base.MapZoomRange = new Range<double>(4, 4);    }}

然後，向正常的地圖控制項中添加一個小尺寸的地圖控制項。

以下是前台介面xaml代碼：

<!--主地圖-->
<c:OfflineMap Name="map" AnimationLevel="UserInput" >
    <c:OfflineMap.Mode>
    <!--自訂的地圖模式-->        <
c:ChinaMode></c:ChinaMode>
    </c:OfflineMap.Mode>
    <!--小地圖的容器-->    <Canvas x:Name="cMiniMap" Width="200" Height="200" Margin="0,5,5,0"        HorizontalAlignment="Right" VerticalAlignment="Top" >        <!--小地圖-->        <c:OfflineMap x:Name="MiniMap" Width="200" Height="200"             NavigationVisibility="Collapsed"             ScaleVisibility="Collapsed"             LogoVisibility="Collapsed"            CopyrightVisibility="Collapsed"            Center="{Binding Center, ElementName=map, Mode=TwoWay}"            ZoomLevel="{Binding ZoomLevel, ElementName=map, Mode=TwoWay}"            AnimationLevel="UserInput"            MouseWheel="MiniMap_MouseWheel">            <c:OfflineMap.Mode>                <!--小地圖的地圖模式-->                <c:ChinaMiniMode></c:ChinaMiniMode>            </c:OfflineMap.Mode>        </c:OfflineMap>        <!--矩形外圈-->        <Rectangle Width="200" Height="200" Stroke="#FFBB00" StrokeThickness="4" Margin="0,0,0,0" />        <!--中心圓點-->        <Ellipse Height="5" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="98,98,0,0" Fill="#FFBB00" />    </Canvas>
</c:OfflineMap>
其中的MiniMap就是要添加的小尺寸控制項，將其寬高固定在了200x200像素，隱藏掉了所有的附加圖層，把兩個地圖的動畫效果都設定為動畫效果（AnimationLevel）在使用者輸入（UserInput）時產生，目的是為了兩個地圖在進行同步移動時更加流暢，同時避免不必要的動畫效果（同時也會失去設定視野時的動畫效果）。兩個地圖的視野同步時通過資料繫結完成的，對兩個地圖的Center和ZoomLevel進行了雙向繫結。
因為小地圖只限制了一級縮放，所以把小地圖的滾輪屏蔽掉（不屏蔽在滾動時會發生漂移）：
//不允許在小地圖上使用滾輪private void MiniMap_MouseWheel(object sender, MouseWheelEventArgs e){    e.Handled = true;}
“鷹眼”地圖最終效果如下（右上方）： 
（以上內容部分參考自：http://www.cnblogs.com/beniao/archive/2010/03/18/1688863.html，請訪問原部落格查看更多內容。）