百度地圖：Tab隱藏，同頁面多次加載地圖地圖置中解決

百度地圖：Tab隱藏，同頁面多次加載地圖地圖置中解決方案

建一個百度地圖

var map=new BMap.Map(“divid”);

地圖初始化需要調用以下方法(設置中心點（lng,lat），以縮放級別(scaledLevel));

map.centerAndZoom(new BMap.Point(lng,lat),scaledLevel)；

對于只加載一個地圖的頁面，這樣就OK了，不會產生如題描述的問題；那么問題來了，比如：我要編輯一個地方，用AJAX load的一個頁面，里面有地圖而且我完成操作只關閉彈出窗口并不刷新頁面時，這時如何新建地圖是各種問題。

解決方法：只有一條需要謹記，百度地圖初始化之后就再不能被隱藏，如果隱藏之后再顯示并且你想地圖顯示之后設置新的中心點，新的點地圖永遠不置中無論你調用map.setCenter(point) or panTo(point)方法；那么方法來了，可以把地圖挪到一個寬為0或者高為0的div節點中并設置overflow:hidden，地圖仍然在顯示但是用戶并不可見，再顯示地圖置中就沒有問題。

附加一點：如果使用map.getContainer()獲取map HTMLElemet ，那么在下一次把它append到Dom中，應在之前完成初始化的動作！

讀導航

本文背景
代碼實現
本文參考
源碼

1. 本文背景

本文介紹使用第三方開源庫 Dragablz 實現可拖拽的 TabControl，本文代碼效果圖如下：

2. 代碼實現

使用 .Net Framework 4.8 創建名為 “TabMenu2” 的WPF模板項目，添加三個Nuget庫：MaterialDesignThemes、MaterialDesignColors 和 Dragablz，其中 TabControl 的拖拽功能是由 Dragablz 庫實現的。

以下為三個庫具體版本：

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Dragablz" version="0.0.3.203" targetFramework="net45" />
  <package id="MaterialDesignColors" version="1.2.3-ci948" targetFramework="net48" />
  <package id="MaterialDesignThemes" version="3.1.0-ci948" targetFramework="net48" />
</packages>

解決方案主要文件目錄組織結構：

TabMenu2
App.xaml
MainWindow.xaml
MainWIndow.xaml.cs

注：站長嘗試使用 .NET CORE 3.1 創建WPF項目，但 Dragablz 庫暫時未提供 .NET CORE 的版本。想著自己編譯 Dragablz 的 .NET CORE 版本，奈何功力不夠，改了一些源碼，最后放棄了。文中代碼及文末給出的 Demo 運行程序需要在 .NET Framework 4.0 運行時環境下運行，想嘗試編譯 Dragablz 庫的朋友可在文末給出的鏈接中下載編譯。

2.1 引入樣式

文件【App.xaml】，在 StartupUri 中設置啟動的視圖【MainWindow.xaml】，并在【Application.Resources】節點增加 MaterialDesignThemes 和 Dragablz 庫的樣式文件：

<Application x:Class="TabMenu2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- primary color -->
                <ResourceDictionary>
                    <!-- include your primary palette -->
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml" />
                    </ResourceDictionary.MergedDictionaries>

                    <!--
                            include three hues from the primary palette (and the associated forecolours).
                            Do not rename, keep in sequence; light to dark.
                        -->
                    <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
                    <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>
                    <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
                    <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>
                    <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
                    <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary700Foreground}"/>
                </ResourceDictionary>

                <!-- secondary colour -->
                <ResourceDictionary>
                    <!-- include your secondary pallette -->
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml" />
                    </ResourceDictionary.MergedDictionaries>

                    <!-- include a single secondary accent color (and the associated forecolour) -->
                    <SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
                    <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
                </ResourceDictionary>

                <!-- Include the Dragablz Material Design style -->
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!-- tell Dragablz tab control to use the Material Design theme -->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

2.2 演示窗體布局

文件【MainWindow.xaml】，引入 MaterialDesignThemes 和 Dragablz 庫的命名空間，【dragablz:TabablzControl】為 Dragablz 庫封裝的 TabControl，使用方式和原生控件類似，單項標簽依然使用 TabItem，使用起來很簡單，源碼如下：

<Window x:Class="TabMenu2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        mc:Ignorable="d"
        Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" 
        MouseLeftButtonDown="Window_MouseLeftButtonDown" WindowStyle="None">
    <Grid>
        <Grid Height="60" VerticalAlignment="Top" Background="#FF9C27B0">
            <TextBlock Text="Dotnet9.com：可拖拽TabControl" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontFamily="Champagne & Limousines" />
            <Button HorizontalAlignment="Right" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" Click="Close_Click">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>
        </Grid>
        <Grid Margin="0 60 0 0">
            <dragablz:TabablzControl>
                <dragablz:TabablzControl.InterTabController>
                    <dragablz:InterTabController/>
                </dragablz:TabablzControl.InterTabController>
                <TabItem Header="首頁">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Run Text="歡迎訪問Dotnet9的博客："/>
                            <Hyperlink Click="ShowWeb_Click" Tag="https://dotnet9.com">https://dotnet9.com</Hyperlink>
                        </TextBlock>
                        <WebBrowser Grid.Row="1" Margin="5" Source="https://dotnet9.com"/>
                    </Grid>
                </TabItem>
                <TabItem Header="設計">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="為用戶體驗服務！" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <WebBrowser Grid.Row="1" Margin="5" Source="https://dotnet9.com"/>
                    </Grid>
                </TabItem>
                <TabItem Header="幫助">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Run Text="問答社區："/>
                            <Hyperlink Click="ShowWeb_Click" Tag="https://dotnet9.com/questions-and-answers">https://dotnet9.com/questions-and-answers</Hyperlink>
                        </TextBlock>
                        <WebBrowser Grid.Row="1" Margin="5" Source="https://dotnet9.com/questions-and-answers"/>
                    </Grid>
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Image Source="https://img.dotnet9.com/logo.png"/>
                    </TabItem.Header>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30">
                            <Hyperlink Click="ShowWeb_Click" Tag="https://dotnet9.com">https://dotnet9.com</Hyperlink>
                        </TextBlock>
                        <WebBrowser Grid.Row="1" Margin="5" Source="https://dotnet9.com"/>
                    </Grid>
                </TabItem>
            </dragablz:TabablzControl>
        </Grid>
    </Grid>
</Window>

后臺代碼【MainWindow.xaml.cs】實現鼠標左鍵拖動窗體、右上角關閉窗體、超鏈接打開網站等功能：

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}

private void Close_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

private void ShowWeb_Click(object sender, RoutedEventArgs e)
{
    Process.Start((sender as Hyperlink).Tag.ToString());
}

3.本文參考

視頻一：C# WPF Material Design UI: Tab Menu，配套源碼：TabMenu2。
C# WPF開源控件庫《MaterialDesignInXAML》
Dragablz-C# WPF可拖拽的TabControl控件

4.源碼

效果圖實現代碼在文中已經全部給出，可直接Copy，按解決方案目錄組織代碼文件即可運行。

演示Demo(點擊下載->DragTabControl，2.39 MB)目錄結構：

DragTabControl
TabMenu2.exe
Dragablz.dll
MaterialDesignThemes.Wpf.dll
MaterialDesignColors.dll

除非注明，文章均由 Dotnet9 整理發布，歡迎轉載。
轉載請注明本文地址：https://dotnet9.com/7391.html

時間如流水，只能流去不流回！

點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！

版規則

縮進

使用2個空格縮進

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

在線咨詢

上一篇：移動端網站開發的tips
下一篇：如何給div加遮罩層（前端開發）- jquery,m

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商