教你用JavaScript地图工具FusionMaps改变地图大小-控件新闻-慧都网

教你用JavaScript地图工具FusionMaps改变地图大小

原创|使用教程|编辑：龚雪|2014-04-17 09:45:02.000|阅读 883 次

概述：本篇内容将向大家介绍几种在使用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>

在上述代码中：