asp.net web开发中使用JS百度地图信息弹出窗中显示echarts图

简介:       之前在WebGIS开发中,主要是企业级开发,而面向大众级的开发平台,如百度地图等却很少。

      之前在WebGIS开发中,主要是企业级开发,而面向大众级的开发平台,如百度地图等却很少。

      最近手头上的一个项目,有一个“电子地图”功能,由于功能需求仅仅是信息查看和浏览,所以选用了百度地图,但是在开发中遇到一个问题,就是信息提示窗口中,要显示折线图,搜索了一大圈也没有这样的示例。

      后来思考了一下,由于信息窗口中使用的是html代码,所以可以间接使用iframe来加载一个包含图表数据的页面,最终实现了功能,以下是初步的示例效果,后续还需要UI设计人员进行优化处理。


geoc.getLocation(point, function (rs) {
      var html = ["<div class='infoBoxContent'><div class='title'><strong>" + deptname + "</strong></div>"
                  , "<table cellpadding='0'cellspacing='0'>"
                   , "<tr><td width='100px'>昨日总用电:</td><td>" + yesterday + "(千瓦时)</td><td rowspan='2'><div style='text-align:center;'><img width='200' height='140' src='../../Images/map/czb.jpg'/></br><a target='_self' href='EnergySaveMain.aspx?UnitCode=" + deptid + "'>查看</a></div></td></tr>"
                  , "<tr><td width='100px'>本月总用电:</td><td>" + lastmonth + "(千瓦时)</td></tr>"
                  , "<tr><td colspan='3'><iframe width='490px' height='200px' frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no'   scrolling='no' src='charts.aspx'/></td></tr>"
                  "</table>"
                  , "</div>"];
      infoBox = new BMapLib.InfoBox(map, html.join(""), {
              boxStyle: { width: "500px", height: "260px" }
               , offset: new BMap.Size(0, 170)//170是调整弹出框上下距离作用
               , closeIconUrl: "../../Images/map/close.png"
               , enableAutoPan: true
               , align: INFOBOX_AT_TOP
     });
     infoBox.open(point);
});

这里最主要的思路代码为:

<iframe width='490px' height='200px' frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no'   scrolling='no' src='charts.aspx'/>

===========================================================================

如果觉得对您有帮助,微信扫一扫支持一下:


相关文章
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
299 2
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
540 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
11月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
443 4
|
12月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
135 1
JavaScript控制台:提升Web开发技能的秘密武器
|
11月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
221 2
|
12月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
118 12
|
人工智能 开发框架 前端开发
Web开发之Vue.js
Web开发之Vue.js
132 3
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
102 3
|
前端开发 JavaScript 安全
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
200 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码