2025福利天堂在线,亚洲av无码专区在线观看,天天日夜夜

教你用JavaScript地圖工具FusionMaps改變地圖大小

原創|使用教程|編輯：龔雪|2014-04-17 09:45:02.000|閱讀 935 次

概述：本篇內容將向大家介紹幾種在使用FusionMaps XT 時如何改變地圖大小的方法。

相關鏈接：

本篇內容將向大家介紹在使用FusionMaps XT 時如何改變地圖大小。可以通過設定地圖的像素或者地圖的寬高百分比（DIV或其他HTML元素）改變其大小。如果地圖大小是通過像素確定的，那該地圖大小將會保持不變，與容器大小不相關。如果寬高和是依容container分比設定的，那么其大小也會隨container大小的變化而變化。

用像素設置寬高

要改變地圖的高度和寬度，只需設為你想要的寬高像素值（后面沒有px后綴）。我們來看看該變化是如何通過HTML代碼展現的：

<html>
  <head>        
     <title>My First map using FusionMaps XT - change size</title>      
           <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>   
  <body>     
     <div id="mapContainer">FusionMaps XT will load here!</div>          
           <script type="text/javascript"><!-- 

        var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
                     "myMapId", "600", "400", "0" );
        myMap.setXMLUrl("Data.xml");
        myMap.render("mapContainer");
      
           // -->
          </script>        
  </body> 
</html>

以上代碼中，我們已將地圖的寬度設為600像素，高度設為400像素。現在該地圖如下圖所示：

通過設定百分比改變寬高

我們還可以通過改變百分比來改變地圖大小。地圖會依據parent HTML container 元素自動調整大小。具體請看下列HTML代碼：

<html>
  <head>        
    <title>My First map using FusionMaps  XT- change size in percentage</title>         
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="mapContainer" style="width:800px; height:300px;">
        FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
          "myMapId", "80%", "100%", "0");
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
      
    // -->
    </script>      
  </body> 
</html>

在上面的代碼中，我們已將該地圖的寬度設為80%，高為100%。id為mapContainer的DIV正是該地圖的container 元素。因此，該地圖的尺寸大小是取決于 mapContainer Div的大小的。在這個例子當中，我們已將DIV的寬度設為800像素高300像素。所以該地圖的尺寸自動調整為了640X300。看起來是這樣的：

值得注意的是，有時候HTML container元素自身沒有獲取到正確的寬高（瀏覽器渲染錯誤造成），地圖就會擠壓變形，或者根本渲染不出來。如果發生這種情況就必須通過像素值確定地圖大小了。

動態改變地圖大小

打開FusionMaps XT，當parent container改變尺寸大小時地圖能動態的調整大小。要實現這個功能你需要：

將地圖的尺寸設為百分比
設置成當瀏覽器變形或頁面發生其他變化時候地圖大小發生動態改變（如添加或去除某個元素）。

每當container元素重設尺寸時候地圖地圖也會隨即動態調整大小。

下例中，我們創建了一個非常簡單的樣本，地圖會充滿Web瀏覽器，一旦瀏覽器尺寸大小改變，該地圖也會調整大小。注意，BODY的寬高和DIV元素設置為使用CSS（cascading style sheet）。

<html>
  <head>        
    <title>My First map using FusionMaps XT
          - Using dynamically resizable map</title>
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>   
  </head>   
  <body style="height:100%;"> 
    <div id="mapContainer" style="height:100%;" >
        FusionMaps XT will load here</div>          
                
    <script type="text/javascript"><!--                   
                        
      var myMap = new FusionCharts("Maps/FCMap_World.swf", 
          "myMapId", "100%", "100%", "0");       
      myMap.setXMLUrl("Data.xml");         
      myMap.render("mapContainer");               
      // -->     
    </script>
  </body> 
</html>

在上述代碼中：