彩票走势图

JS地图工具FusionMaps XT创建向下展开的地图

原创|使用教程|编辑:龚雪|2014-05-14 10:14:20.000|阅读 548 次

概述:详细介绍如何使用FusionMaps XT轻松创建向下展开地图,以及如何在新窗口打开链接。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

使用FusionMaps XT可以轻松创建向下展开地图。 所有FusionMaps XT 的地图都支持向下展开。利用FusionMaps XT的向下展开功能可以轻松制作具备“向下展开”和“放大” 功能的地图。 而地图的所有实体、标签和连接器都可以有展开链接。

使用FusionMaps XT可以对下列几种类型的地图实体和标签链接进行定义:

  • 在同一个页面中打开的简单的链接
  • 在新的页面中打开的简单链接
  • 在指定框架内打开的链接
  • 在弹出窗口中打开的链接
  • 现有的JavaScript 功能 (在相同页面) 被当做链接调用

给地图定义链接

给任一数据节点定义一个简单链接,只需定义<entity>元素的链接属性:

<entity... value='2235' ... link='ShowDetails.asp%3FId%3D45' ...>

如上列举的XML,当点击实体时将跳转到ShowDetails.asp?Id=45页面。

同样的,为一个标签定义链接, 添加链接属性到<marker> 元素 (  <application>元素的子元素)。要注意,链接应当应用到marker application元素而不是marker definition 元素。

如你所见,上述链接都是URL编码的。 FusionMaps XT 里,所有链接都是URL编译格式。当用户点击链接时,FusionMaps XT就会自动解码并调用ShowDetails.asp?Id=45。

所有服务器端的脚本语言都提供一个类函数功能,以方便URL编译任何字符串---比如在ASP和ASP.NET就有Server.URLEncode(strURL) ,可以此类推。

XML Example:

<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'>
   <data>
      <entity id='NA' value='515' link='DemoLinkPages/DemoLink1.html'/>
      <entity id='SA' value='373' link='DemoLinkPages/DemoLink2.html'/>
      <entity id='AS' value='3875' link='DemoLinkPages/DemoLink3.html'/>
      <entity id='EU' value='727' link='DemoLinkPages/DemoLink4.html'/>
      <entity id='AF' value='885' link='DemoLinkPages/DemoLink5.html'/>
      <entity id='AU' value='32' link='DemoLinkPages/DemoLink6.html'/>
</data> 
</map>

在新窗口打开链接

通常情形下,我们都希望在新窗口打开链接。 方法就是在链接前添加“n-”。例如:

<entity ... value='2235' ... link='n-ShowDetails.asp%3FId%3D45' ...>

这样,点击链接就会打开一个新窗口。

Example XML:

<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'>
   <data>
      <entity id='NA' value='515' link='n-DemoLinkPages/DemoLink1.html'/>
      <entity id='SA' value='373' link='n-DemoLinkPages/DemoLink2.html'/>
      <entity id='AS' value='3875' link='n-DemoLinkPages/DemoLink3.html'/>
      <entity id='EU' value='727' link='n-DemoLinkPages/DemoLink4.html'/>
      <entity id='AF' value='885' link='n-DemoLinkPages/DemoLink5.html'/>
      <entity id='AU' value='32' link='n-DemoLinkPages/DemoLink6.html'/>
   </data>
</map>

》》》点击下载FusionMaps XT最新试用版


标签:JavaScript HTML5数据可视化地图地图工具FusionMaps

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP