FusionMaps v3.0能夠幫助你給動(dòng)態(tài)網(wǎng)頁添加動(dòng)畫的、交互的以及數(shù)據(jù)驅(qū)動(dòng)的 Flash Maps這些圖片是由XML數(shù)據(jù)源驅(qū)動(dòng)，并且可以被整合到任何腳本技術(shù) (ASP.NET, ASP, PHP, JSP, CF等)以及數(shù)據(jù)庫中。

隨著信息化的高度發(fā)展，地域統(tǒng)計(jì)圖成為了一個(gè)重要需求。很多報(bào)表目前沒有地域統(tǒng)計(jì)圖，但幸好，FusionMaps提供了優(yōu)秀的flash統(tǒng)計(jì)圖，以快逸報(bào)表為例，它可以很容易的集成FusionMaps，輕松實(shí)現(xiàn)地域統(tǒng)計(jì)圖。 

快逸報(bào)表集成FusionMaps的原理與FusionCharts一致。 

準(zhǔn)備工作 

1：首先從官方網(wǎng)站下載swf文件(Ready to use maps)，以及FusionMaps.js文件 

2：準(zhǔn)備xml文件，可參考FusionMaps介紹及常用功能文章 

集成工作 

以快逸demo應(yīng)用為例 

1：首先復(fù)制swf文件到demo目錄下 

2：復(fù)制所需要的js到demo應(yīng)用下 

3：創(chuàng)建raq文件fc.raq，集成中國(guó)地圖 

內(nèi)容為：

div id=”mapdiv” align=”center”> 

China map 

</div> 

<script type=”text/javascript”> 

// FCMap_China2.swf為包含臺(tái)灣在內(nèi)的中國(guó)地圖 

var map = new FusionMaps(“../FusionMap/FCMap_China2.swf”, “Map1Id”, “500″, “360″, “0″, “0″); 

map.setDataURL(“china.xml”); 

map.render(“mapdiv”); 

</script> 

China.xml內(nèi)容為： 

<map showShadow=’1′ showBevel=’1′ showMarkerLabels=’1′ fillColor=’F0FAFF’ borderColor=’330000′ baseFont=’Verdana’ baseFontSize=’12′ markerBorderColor=’000000′ markerBgColor=’FF5904′ markerRadius=’6′ legendPosition=’bottom’ useHoverColor=’1′ showMarkerToolTip=’1′ showCanvasBorder=’0′ canvasBorderColor=’f1f1f1′ canvasBorderThickness=’2′ borderColor=’00324A’ hoverColor=’C0D2F8′>  

<entityDef> 

            <entity internalId=’CN.BJ’ newId=’BJ’ sName=’北京‘ lName=’中國(guó)北京‘/>      

</entityDef> 


<data> 

        <entity id=’BJ’ displayValue=’北京‘ color=’FEFFFF’ link=”n-../reportJsp/showReport.jsp?raq=ordersinfo.raq&city=北京“/>  

        <entity id=’CN.AH’ displayValue=’安徽‘ color=’EFFFFF’/>  

        <entity id=’CN.CQ’ displayValue=’重慶‘ color=’FFEFFF’ />  

        <entity id=’CN.FJ’ displayValue=’福建‘ color=’FFFEFF’ />  

        <entity id=’CN.GS’ displayValue=’甘肅‘ color=’FFFFFF’ />  

        <entity id=’CN.GD’ displayValue=’廣東‘ color=’FFFFFF’ />  

        <entity id=’CN.GX’ displayValue=’廣西‘ color=’FFFFFF’ />  

        <entity id=’CN.GZ’ displayValue=’貴州‘ color=’FFFFFF’ />  

        <entity id=’CN.HA’ displayValue=’海南‘ color=’FFFFFF’ />  

        <entity id=’CN.HB’ displayValue=’河北‘ color=’FFFFFF’ />  

        <entity id=’CN.HE’ displayValue=’河南‘ color=’FFFFFF’ />  

        <entity id=’CN.HU’ displayValue=’湖北‘ color=’FFFFFF’ />  

        <entity id=’CN.HL’ displayValue=’黑龍江‘ color=’FFFFFF’ />  

        <entity id=’CN.HN’ displayValue=’湖南‘ color=’FFFFFF’ />  

        <entity id=’CN.JS’ displayValue=’江蘇‘ color=’FFFFFF’ />  

        <entity id=’CN.JX’ displayValue=’江西‘ color=’FFFFFF’ />  

        <entity id=’CN.JL’ displayValue=’吉林‘ color=’FFFFFF’ />  

        <entity id=’CN.LN’ displayValue=’遼寧‘ color=’FFFFFF’ />  

        <entity id=’CN.NM’ displayValue=’內(nèi)蒙古‘ color=’FFFFFF’ />  

        <entity id=’CN.NX’ displayValue=’寧夏‘ color=’FFFFFF’ />  

        <entity id=’CN.QH’ displayValue=’青海‘ color=’FFFFFF’ />  

        <entity id=’CN.SA’ displayValue=’山西‘ color=’FFFFFF’ />  

        <entity id=’CN.SD’ displayValue=’山東‘ color=’FFFFFF’ />  

        <entity id=’CN.SH’ displayValue=’上海‘ color=’FFFFFF’ />  

        <entity id=’CN.SX’ displayValue=’陜西‘ color=’FFFFFF’ />  

        <entity id=’CN.SC’ displayValue=’四川‘ color=’FFFFFF’ />  

        <entity id=’CN.TJ’ displayValue=’天津‘ color=’FFFFFF’ />  

        <entity id=’CN.XJ’ displayValue=’新疆‘ color=’FFFFFF’ />  

        <entity id=’CN.XZ’ displayValue=’西藏‘ color=’FFFFFF’ />  

        <entity id=’CN.YN’ displayValue=’云南‘  color=’FFFFFF’ />  

        <entity id=’CN.ZJ’ displayValue=’浙江‘ color=’FFFFFF’ />  

        <entity id=’CN.MA’ displayValue=’澳門‘ color=’FFFFFF’ />  

        <entity id=’CN.HK’ displayValue=’香港‘ color=’FFFFFF’ />  

        <entity id=’CN.TA’ displayValue=’臺(tái)灣‘ color=’FFFFFF’ />  

</data> 

</map>  

4：修改showReport.jsp文件，引入fusionmaps.js 

5：效果圖 

點(diǎn)擊北京地區(qū)，新彈出一個(gè)頁面，內(nèi)容如下： 

總結(jié)： 

整體來看，快逸報(bào)表集成FusionMaps非常簡(jiǎn)單，如果需要更加靈活的在統(tǒng)計(jì)圖中顯示地區(qū)的某些統(tǒng)計(jì)值，只需要在展示之前，后臺(tái)修改xml靈活賦值即可。