国产高清大片,日韩午夜激情电影,国产对白刺激

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

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

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

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

用像素設(shè)置寬高

要改變地圖的高度和寬度，只需設(shè)為你想要的寬高像素值（后面沒(méi)有px后綴）。我們來(lái)看看該變化是如何通過(guò)HTML代碼展現(xiàn)的：

<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>

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

通過(guò)設(shè)定百分比改變寬高

我們還可以通過(guò)改變百分比來(lái)改變地圖大小。地圖會(huì)依據(jù)parent HTML container 元素自動(dòng)調(diào)整大小。具體請(qǐng)看下列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>

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

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

動(dòng)態(tài)改變地圖大小

打開(kāi)FusionMaps XT，當(dāng)parent container改變尺寸大小時(shí)地圖能動(dòng)態(tài)的調(diào)整大小。要實(shí)現(xiàn)這個(gè)功能你需要：

將地圖的尺寸設(shè)為百分比
設(shè)置成當(dāng)瀏覽器變形或頁(yè)面發(fā)生其他變化時(shí)候地圖大小發(fā)生動(dòng)態(tài)改變（如添加或去除某個(gè)元素）。

每當(dāng)container元素重設(shè)尺寸時(shí)候地圖地圖也會(huì)隨即動(dòng)態(tài)調(diào)整大小。

下例中，我們創(chuàng)建了一個(gè)非常簡(jiǎn)單的樣本，地圖會(huì)充滿Web瀏覽器，一旦瀏覽器尺寸大小改變，該地圖也會(huì)調(diào)整大小。注意，BODY的寬高和DIV元素設(shè)置為使用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>

在上述代碼中：