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

之前在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‘/>

时间: 2024-11-08 03:29:52

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

JS编写类似弹出窗口样式显示层

JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" data-options="title:'提交变更申请',collapsible:false,minimizable:false,maximizable:false,modal:true" closed="true" style="width:820px;he

解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题

官方说明链接: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000736584-SciView-in-PyCharm-2017-3-reduces-functionality-of-Matplotlib pycharm从2017.3版之后,将matplotlib的绘图的结果默认显示在SciView窗口中, 而不是弹出独立的窗口, 如图 如果不喜欢这种设置,可以通过如下方式修改,弹出独立窗口 File | S

ASP.NET WEB开发6大内置对象

ASP.NET  WEB开发6大内置对象 ASP.NET 内置对象包括 1.Response 2.Request  3.Server  4.Application   5.Session   6.Cookie 1  Request对象主要是让服务器取得客户端浏览器的一些数据,包括从HTML表单用Post或者GET方法传递的参数.Cookie和用户认证. 2 Request对象是Page对象的成员之一. 3 程序中不需要做任何的声明即可直接使用:其类名为 HttpRequest属性很多,但方法很少

在vue中继续使用layer.js来做弹出层---切图网

layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全局变量导出. 然后在文件中找到下面的代码注释掉,这段代码是为layer添加样式的,但使用的路径不对

EBS OAF开发中实现參数式弹出窗体

(版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 概览 參数式弹出窗体和嵌入式弹出窗体不一样,它拥有独立的区域,并不嵌入到使用页面中,它里面的内容依据须要来获取和生成,它拥有自己的AM和页面状态,对popup页面事件的处理也不一样.两种弹出式窗体都仅仅在以下四种组件所支持,既不能改变大小也不可移动. 1.        Text(messageStyledText) 2.        Image 3.        Link 4.    

Android应用之——百度地图最新SDK3.0应用,实现最常用的标注覆盖物以及弹出窗覆盖物

一.概述 最新版的百度地图SDK3.0,修改了很多方法,之前的很多方法被简化了,正好在做地图这一块,顺便就使用了最新版的sdk. 下载官方给的demo,发现变化还是挺大的,之前的一些方法都换了,地图的初始化也进行了调整.多了好几个类,具体用法参考下面的例子,详细的说明可参照官方的说明文档. 二.效果图 标注覆盖物效果图: 弹出窗覆盖物: 三.实现过程 大部分是根据官方给的demo来的. A.配置文件: 第一步:在工程里新建libs文件夹,将开发包里的baidumapapi_vX_X_X.jar拷

datatables.js 简单使用--弹出编辑框或添加数据框

内容:选中某一条记录,弹出编辑框 环境:asp.net mvc ,  bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代码是从网上找的,主要分3部分,标题header,内容body和底部footer 1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 2 ari

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

ASP.NET—013:实现带控件的弹出层(弹出框)

在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页.而在有些时候,仅仅是显示一些单一的.少量的数据,或者一些简单的操作时.就没必要使用新弹出页面了.此时,最好使用弹出层,也就是数据还是显示在当前页面的某个控件上,然后通过JS方法实现达到弹出的目的.看下面的例子: <html xmlns="http: