文档章节

数据展示 带点击弹框小实例

吹比龙
 吹比龙
发布于 2016/06/30 11:25
字数 197
阅读 70
收藏 1

                    map.clearOverlays();
                    var pts = [];
                    for (var i = 0; i < data.length; i++) {
                        var pt = new BMap.Point(data[i].lng,data[i].lat);

                        var myIcon = null;
                            if (data[i].dataType == "JCD" || data[i].dataType == "ZDJCD") {
                                myIcon = new BMap.Icon("image/monitoring.png",
                                        new BMap.Size(24, 24));

                            }
                            if (data[i].dataType == "SXT") {
                                myIcon = new BMap.Icon("image/camera.png",
                                        new BMap.Size(24, 24));

                            }
                            
                            var marker2 = new BMap.Marker(pt, {
                                icon : myIcon
                            });
                            var msg = "";
                            if (data[i].dataType != "HT" ) {
                            
                             msg =     "所在高速:" +data[i].highwayName + " <br>" +
                                        "桩号:" +data[i].stake + " <br>" ;
                            } else {
                                msg ='';
                            }
                            map.addOverlay(marker2); // 将标注添加到地图中
                            addInfo(msg,marker2);
                             pts.push(pt);

                        }
                    // 自适应比例尺,调整视角
                    map.setViewport(pts);

// 重点 这里如果不这样写,会造成只显示最后一个点的信息

           function addInfo(txt,marker){ 
          var infoWindow = new BMap.InfoWindow(txt); 
          marker.addEventListener("click", function(){
            this.openInfoWindow(infoWindow);
            }); 
         } 

// 相对自适应布局

<style type="text/css">
html {
    height: 100%;
}

body {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100%;

}

.bottom {

    height: 40px;
}

.main {
    height: calc(100% - 40px);
}
</style>

© 著作权归作者所有

吹比龙
粉丝 10
博文 135
码字总数 38713
作品 0
合肥
程序员
私信 提问
Element UI 细节方面 + 总结

入职快半个月。公司业务也多多少少了解,期间的任务也不多,工作安排也不是很理想。 在这首先感谢一下我的组长,帮我解决了很多问题。也是组长带我到现在,再次感谢。 公司在做iPad端应用,我...

Rocky1
2019/06/14
0
0
vue实现对表格数据的增删改查

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在v...

wudized
2017/07/10
0
0
OSCHINA Android 客户端 1.7.0 发布

OSChina.NET for Android v1.7.0 版本发布了,该版本主要更新内容: v1.7.0 更新日志: 1.默认加载数据均为缓存,新数据需用户手动刷新; 2.新增问答区帖子带标签的功能; 3.新增动弹发表评论...

迷途d书童
2012/09/04
1K
24
支持多框架的组件库 KPC 1.0 正式发布

自从17年11月份对外公布以来,KPC已经经过了8个月的迭代,期间发布了几十个正式版本,但一直没有到1.0,因为我们觉得1.0是个里程碑版本,我们必须做的足够完善才敢称之为1.0。而如今我们有信...

JaveyZ
2019/07/17
1K
0
Python爬虫--Selenium模拟用户的键盘鼠标操作

基于 HttpClient的爬虫对于许多混淆的加密库需要慢慢调试,找到加密原理,耗时耗力,等你破解了加密方法说不定又换了新的加密方法,所以,针对这样的网站还是选择内置浏览引擎的爬虫(关键词:Phan...

NiceBlueChai
2018/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解JVM - Class类文件的结构

Class文件是Java虚拟机执行引擎的数据入口,也是Java技术体系的基础支柱之一。 Class文件本质 Class文件本质上是一组以8个字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在C...

xiaolyuh
12分钟前
7
0
How to view table foreign keys (FKs) in HeidiSQL

In this tutorial I'd like to show you how to view table foreign keys with HeidiSQL. To see table FKs first select table in the object explorer, then select Table tab, and under ......

Ciet
27分钟前
4
0
Go 每日一库之 cobra

简介 cobra是一个命令行程序库,可以用来编写命令行程序。同时,它也提供了一个脚手架, 用于生成基于 cobra 的应用程序框架。非常多知名的开源项目使用了 cobra 库构建命令行,如Kubernete...

darjunlee
30分钟前
4
0
【Go专家编程】Go module replace详解

TODO

恋恋美食
34分钟前
7
0
基于SWIG跨平台开发的C++编码规范

1、数组定义 使用数组不建议采用指针方式eg double *,或者 double test[4] 直接采用std::vector或list即可。对于固定长度的数组定义为一个结构体 double test[4]instead ofstruct Vec...

洋碱
46分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部