百度地图点击标注展示信息栏，信息栏根据点击的标注，显示不同的信息

千次阅读 2018-08-22 15:07:45

百度地图点击标注展示信息栏，信息栏根据点击的标注，显示不同的信息最近做百度API的应用，鼠标点击地图上具体的一个标签，会弹出信息栏，信息栏中的信息需要根据点击的是不同的标签，显示不同的内容。过程中...

百度地图点击标注展示信息栏，信息栏根据点击的标注，显示不同的信息

最近做百度API的应用，鼠标点击地图上具体的一个标签，会弹出信息栏，信息栏中的信息需要根据点击的是不同的标签，显示不同的内容。过程中遇到一个问题，就是无论点击哪一个，都显示的是最后一个infowindow，最后将这个问题解决，希望给遇到同样问题的朋友一些帮助。

!!! 关键是思路：为marker建立一个title（可以理解为ID），这样在marker执行监听事件click时，才可以根据点击的marker来判断输出哪一个infowindow，输出的信息只要有同样的ID与marker对应就可以控制了（说白话点，就是自己给marker建立一个id，但百度api没有提供setid，只提供了一个setTitle，那就拿这个当id用，id就是0-x的数字，这样你就有了一个可以用来当下标的东西了）。关键代码如下：

这里写图片描述

收起

展开全文

CSS3中，鼠标触碰图片，滑动块展示信息

千次阅读 2018-01-18 20:18:34

CSS3中，鼠标触碰图片，滑动块展示信息

CSS3中，鼠标触碰图片，滑动块展示信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片动画</title>
    <style type="text/css">
        .box{
            /* 设置盒子的大小 */
            width: 600px;
            height: 600px;
            /* 居中 上端距离 */
            margin: 10px auto 0;
            border: 1px solid pink;
            /* 相对定位 */
            position: relative;
            /* 初始时，隐藏 */
            overflow: hidden;
        }

        .box img{
            /* 设置图片的大小 */
            width: 600px;
            height: 600px;
        }

        .box .pic_info{
            /* 设置背景大小，即宽、高 */
            width: 600px;
            height: 200px;
            /* 背景颜色、透明度 */
            background:rgba(0,0,0,0.5);
            /* 控制字体颜色 */
            color: #fff;
            /* 绝对定位 */
            position: absolute;
            left: 0;
            /* 定位在图片的低端，即与图片的顶端相对的距离 */
            top:600px;
            /* 移动的方向、速度、过渡方式 */
            transition: all 500ms ease;
        }

        .box:hover .pic_info{
            /* 鼠标移动时，背景色移动，距离图片顶端相聚400px */
            top: 400px;
        }


    </style>
</head>
<body>
    <div class="box">
        <img src="4.jpg" alt="图片">
        <div class="pic_info">图片说明：这是一个风景图</div>
    </div>
</body>
</html>

收起

展开全文

css3 动画

leaflet + echart 图表展示信息

千次阅读 2017-11-27 16:59:54

本文主要介绍leaflet采用echart以图表方式在地图中进行信息展示的三种方法，包括 popup、Control形式及Marker方式...


本文转账出处：7.结合echart图表展示信息

本文主要介绍leaflet采用echart以图表方式在地图中进行信息展示的三种方法，包括 popup、Control形式及Marker方式。具体如下：

1.popup中添加图表信息


                  
                  //定义marker
                  var marker = L.marker(val.location).addTo(map);
                  var content = '<div style="width: 220px; height: 220px;" id="marker' + val.id + '"></div>';
                  marker.bindPopup(content, {});
                  marker.on('popupopen', function(e) {
                      // 基于准备好的dom，初始化echarts实例
                      var myChart = echarts.init(document.getElementById('marker' + val.id));
                      // 指定图表的配置项和数据
                      option = {
                          tooltip: {
                              trigger: 'axis'
                          },
                          xAxis: [{
                              type: 'category',
                              data: ['1月', '2月', '3月', '4月']
                          }],
                          yAxis: [{
                              type: 'value',
                              name: '水量',
                              min: 0,
                              max: 50,
                              interval: 50,
                              axisLabel: {
                                  formatter: '{value} ml'
                              }
                          }, {
                              type: 'value',
                              name: '温度',
                              min: 0,
                              max: 10,
                              interval: 5,
                              axisLabel: {
                                  formatter: '{value} °C'
                              }
                          }],
                          series: [{
                              name: '蒸发量',
                              type: 'bar',
                              data: [2.0, 4.9, 7.0, 23.2]
                          }, {
                              name: '降水量',
                              type: 'bar',
                              data: [2.6, 5.9, 9.0, 26.4]
                          }, {
                              name: '平均温度',
                              type: 'line',
                              yAxisIndex: 1,
                              data: [2.0, 2.2, 3.3, 4.5]
                          }]
                      };
                      // 使用刚指定的配置项和数据显示图表。
                      myChart.setOption(option);
                  });





2.echat以控件形式添加在map中

  .chart {
    width: 500px;
    height: 300px;
    background-color: white;
}


 


 1          var chart = L.control({position: 'bottomright'});
 2           chart.onAdd = function (map) {
 3               var div = L.DomUtil.create('div', 'info chart');
 4               div.id="chatrdemo";
 5               return div;
 6           };
 7           chart.addTo(map);
 8           // 基于准备好的dom，初始化echarts实例
 9                   var myChart = echarts.init(document.getElementById('chatrdemo'));
10                   // 指定图表的配置项和数据
11                   option = {
12                       tooltip: {
13                           trigger: 'axis'
14                       },
15                       xAxis: [{
16                           type: 'category',
17                           data: ['1月', '2月', '3月', '4月']
18                       }],
19                       yAxis: [{
20                           type: 'value',
21                           name: '水量',
22                           min: 0,
23                           max: 50,
24                           interval: 50,
25                           axisLabel: {
26                               formatter: '{value} ml'
27                           }
28                       }, {
29                           type: 'value',
30                           name: '温度',
31                           min: 0,
32                           max: 10,
33                           interval: 5,
34                           axisLabel: {
35                               formatter: '{value} °C'
36                           }
37                       }],
38                       series: [{
39                           name: '蒸发量',
40                           type: 'bar',
41                           data: [2.0, 4.9, 7.0, 23.2]
42                       }, {
43                           name: '降水量',
44                           type: 'bar',
45                           data: [2.6, 5.9, 9.0, 26.4]
46                       }, {
47                           name: '平均温度',
48                           type: 'line',
49                           yAxisIndex: 1,
50                           data: [2.0, 2.2, 3.3, 4.5]
51                       }]
52                   };
53                   
54                   // 使用刚指定的配置项和数据显示图表。
55                   myChart.setOption(option);





3.以marker形式添加在map


 var pictures = L.marker(val.location, {
                      icon: L.divIcon({
                          className: 'leaflet-echart-icon',
                          iconSize: [160, 160],
                          html: '<div id="marker' + val.id + '" style="width: 160px; height: 160px; position: relative; background-color: transparent;">asd</div>'
                      })
                  }).addTo(map);
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('marker' + val.id));
                  // 指定图表的配置项和数据
                  option = {
                      tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b}: {c} ({d}%)"
                      },
                      series: [{
                          name: '访问来源',
                          type: 'pie',
                          radius: ['20', '50'],
                          avoidLabelOverlap: false,
                          label: {
                              normal: {
                                  show: false,
                                  position: 'center'
                              },
                              emphasis: {
                                  show: true,
                                  textStyle: {
                                      fontSize: '18',
                                      fontWeight: 'bold'
                                  }
                              }
                          },
                          labelLine: {
                              normal: {
                                  show: false
                              }
                          },
                          data: [{
                              value: val.value1,
                              name: '直接访问'
                          }, {
                              value: val.value2,
                              name: '邮件营销'
                          }, {
                              value: val.value3,
                              name: '联盟广告'
                          }, {
                              value: val.value4,
                              name: '视频广告'
                          }, {
                              value: 20,
                              name: '搜索引擎'
                          }]
                      }]
                  };
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);

收起

展开全文

leaflet echart control popup

RecyclerView实现分组展示信息

万次阅读 热门讨论 2016-08-23 18:33:24

这个方法是用来展示content内容区域，返回值是我们需要展示多少内容，在本例中，我们超过8条数据只展示8条，点击展开后就会展示全部数据，逻辑就在这里控制。对应数据结构为tagInfoList protected abstract ...

前言

转载请注明出处 
http://blog.csdn.net/wzlyd1/article/details/52292548 

一直在鸿洋大神的安卓群里水群，渐渐的loader和安卓弟等人都成长了起来，还记得当初他们清纯的模样。小L在群里不水了，安卓弟成长为CTO了，只有我依然默默无闻，于是决定再写博客了，之前不写，一是因为工作比较忙，二是因为我水平有限，简单的不想写，因为写了也没用，网上demo很多，难的自己也没多高的造诣，写也写不出来，所以一直都是处于“半荒废状态”，当然说到底其实还是因为懒，于是今天我再次执笔，将学到的东西全部记录下来。



效果

先上效果图给大家看看，好有一个整体的认识



效果就是这样的，但是不仅仅局限于这种布局，事实上只要是三段式布局，都可以通过该demo的学习来实现，什么是三段式布局呢，就是有header -content-footer类型的布局，画一个图来解释



比如下面这个图就可以 


可以看到，用途还是很广泛的，所以很需要我们去学习一下



怎么去实现

gitbub上有一个很牛逼的类，但是貌似知道的人很少，名字叫做SectionedRecyclerViewAdapter ，地址https://github.com/truizlop/SectionedRecyclerView  但是今天我们不去研究她是怎么实现的，我们来研究他怎么用就行了

继承SectionedRecyclerViewAdapter 
/**
 * Created by lyd10892 on 2016/8/23.
 */

public class HotelEntityAdapter extends SectionedRecyclerViewAdapter<HeaderHolder, DescHolder, RecyclerView.ViewHolder> {

    public ArrayList<HotelEntity.TagsEntity> allTagList;
    private Context mContext;
    private LayoutInflater mInflater;
    private SparseBooleanArray mBooleanMap;//记录下哪个section是被打开的

    public HotelEntityAdapter(Context context) {
        mContext = context;
        mInflater = LayoutInflater.from(context);
        mBooleanMap = new SparseBooleanArray();
    }

    public void setData(ArrayList<HotelEntity.TagsEntity> allTagList) {
        this.allTagList = allTagList;
        notifyDataSetChanged();
    }

    @Override
    protected int getSectionCount() {
        return HotelUtils.isEmpty(allTagList) ? 0 : allTagList.size();
    }

    @Override
    protected int getItemCountForSection(int section) {
        int count = allTagList.get(section).tagInfoList.size();
        if (count >= 8 && !mBooleanMap.get(section)) {
            count = 8;
        }

        return HotelUtils.isEmpty(allTagList.get(section).tagInfoList) ? 0 : count;
    }

    //是否有footer布局
    @Override
    protected boolean hasFooterInSection(int section) {
        return false;
    }

    @Override
    protected HeaderHolder onCreateSectionHeaderViewHolder(ViewGroup parent, int viewType) {
        return new HeaderHolder(mInflater.inflate(R.layout.hotel_title_item, parent, false));
    }

    @Override
    protected RecyclerView.ViewHolder onCreateSectionFooterViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    protected DescHolder onCreateItemViewHolder(ViewGroup parent, int viewType) {
        return new DescHolder(mInflater.inflate(R.layout.hotel_desc_item, parent, false));
    }

    @Override
    protected void onBindSectionHeaderViewHolder(final HeaderHolder holder, final int section) {
        holder.openView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean isOpen = mBooleanMap.get(section);
                String text = isOpen ? "展开" : "关闭";
                mBooleanMap.put(section, !isOpen);
                holder.openView.setText(text);
                notifyDataSetChanged();
            }
        });

        holder.titleView.setText(allTagList.get(section).tagsName);
        holder.openView.setText(mBooleanMap.get(section) ? "关闭" : "展开");

    }

    @Override
    protected void onBindSectionFooterViewHolder(RecyclerView.ViewHolder holder, int section) {

    }

    @Override
    protected void onBindItemViewHolder(DescHolder holder, int section, int position) {
        holder.descView.setText(allTagList.get(section).tagInfoList.get(position).tagName);

    }
}


这里面有几个很重要的方法也是需要我们必须重写的，是我们实现效果的关键



    protected abstract int getSectionCount();

    protected abstract int getItemCountForSection(int section);

    protected abstract boolean hasFooterInSection(int section);

    protected abstract H  onCreateSectionHeaderViewHolder(ViewGroup parent, int viewType);

    protected abstract F  onCreateSectionFooterViewHolder(ViewGroup parent, int viewType);

    protected abstract VH onCreateItemViewHolder(ViewGroup parent, int viewType);

    protected abstract void onBindSectionHeaderViewHolder(H holder, int section);

    protected abstract void onBindSectionFooterViewHolder(F holder, int section);

   protected abstract void onBindItemViewHolder(VH holder, int section, int position);

接下来我们详细分析这几个方法存在的具体意义 

不过在说之前我们需要看一下我们的数据结构，这个也很重要



public class HotelEntity {
    /**
     * 要注意这个类的数据结构，很重要，直接决定了我们能不能实现分组展示
     */

    public ArrayList<TagsEntity> allTagsList;

    public class TagsEntity {
        public String tagsName;
        public ArrayList<TagInfo> tagInfoList;

        public class TagInfo {
            public String tagName;
        }
    }

}


这个方法主要是用来计算我们一共有多少个section需要展示，返回值是我们最外称list的大小，在我们的示例图中，对应的为热门品牌—商业区—热门景点 等，对应的数据是我们的allTagList



protected abstract int getSectionCount();

这个方法是用来展示content内容区域，返回值是我们需要展示多少内容，在本例中，我们超过8条数据只展示8条，点击展开后就会展示全部数据，逻辑就在这里控制。 对应数据结构为tagInfoList



protected abstract int getItemCountForSection(int section);

判断是否需要底部footer布局，在该例中，我们并不需要显示footer，所以默认返回false就可以，如果你对应的section需要展示footer布局，那么就在对应的section返回true就行了



protected abstract boolean hasFooterInSection(int section);


我们要单独说一下这个方法，这里有一个section和position ，有些人可能会弄混 

section是区域，也就是我们最外层的index，position是每个section对应的内容数据的position



@Override
    protected void onBindItemViewHolder(DescHolder holder, int section, int position) {
        holder.descView.setText(allTagList.get(section).tagInfoList.get(position).tagName);

    }

至于下面的onCreateViewHolder ,onBindViewHolder不多做解释了，如果你用过recyclerView，使用方法是一样的，无非是渲染布局，绑定数据

展示数据 

基本上，如果上面的adapter逻辑写完，我们的布局算是完成了，首页代码如下
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private HotelEntityAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        mAdapter = new HotelEntityAdapter(this);
        GridLayoutManager manager = new GridLayoutManager(this,4);//我们需要网格式的布局
        //设置header占据的空间
        manager.setSpanSizeLookup(new SectionedSpanSizeLookup(mAdapter,manager));
        mRecyclerView.setLayoutManager(manager);
        mRecyclerView.setAdapter(mAdapter);
        HotelEntity entity = JsonUtils.analysisJsonFile(this,"json");
        mAdapter.setData(entity.allTagsList);
    }
}

代码里有一段很重要的注释，设置header占据的空间，没错，因为我们要仿造header的效果，我们设置的manager是GridLayoutManager，设置的每一行item数量是4，如果不重写该方法，那么header显示就会出错，核心代码如下：



/**
 * A SpanSizeLookup to draw section headers or footer spanning the whole width of the RecyclerView
 * when using a GridLayoutManager
 *
 * 这个类是用来自定义每个item需要占据的空间
 *
 *
 */
public class SectionedSpanSizeLookup extends GridLayoutManager.SpanSizeLookup {

    protected SectionedRecyclerViewAdapter<?, ?, ?> adapter = null;
    protected GridLayoutManager layoutManager = null;

    public SectionedSpanSizeLookup(SectionedRecyclerViewAdapter<?, ?, ?> adapter, GridLayoutManager layoutManager) {
        this.adapter = adapter;
        this.layoutManager = layoutManager;
    }

    @Override
    public int getSpanSize(int position) {

        //header和footer占据的是全屏
        if(adapter.isSectionHeaderPosition(position) || adapter.isSectionFooterPosition(position)){
            return layoutManager.getSpanCount();
        }else{
            return 1;//其他默认1
        }

    }
}

最重要的是getSpanSize方法，只要是header或者是footer就返回我们设置的网格数，也就是4，代表header和footer占据4个网格的空间，其他占据1个 

这样，我们就可以完美的展示我们需要的布局了 
当前我们的demo是网格布局的，你也可以设置流式布局，只需要设置不同的layoutmanager就可以了 

比如下图的效果我们也可以实现 


核心代码已经解释完毕，当然最核心的是SectionedRecyclerViewAdapter这个类，这个类好好学习一下，会学到很多，也会实现很多app常见的布局效果，比如设置不同的viewType展现更复杂的布局 

最后，看一下代码结构： 


最后啰嗦一句，写博客比写代码难多了。 

demo已经上传到github了，欢迎fork 
https://github.com/nbwzlyd/SectionRecyclerViewDemo

收起

展开全文

android

关于jQuery load()方法加载页面后台发生异常而前台页面加载失败且没有任何展示信息的问题处理
千次阅读 2017-08-08 16:48:57
关于jQuery load()方法加载页面后台发生异常而前台页面加载失败且没有任何展示信息的问题处理
收起
Jquery load
echarts点击柱状图事件，echarts柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息
千次阅读 2019-07-19 11:46:59
//单个柱状图表头展示 for (var i = 0, l = option.xAxis[0].data.length; i ; i++) { if (option.xAxis[0].data[i] == params.name) { var val1 = breakCount[i] || 0; var val2 = checkCount[i] || 0; ...
收起
Threejs 结合Echarts（V4）生成静态的数据展示信息
千次阅读 2019-05-27 18:16:22
//customEchart.getDataURL() 返回base64编码的图片信息 // 或者利用 new THREE.CanvasTexture(customEchart.getDom()) var infoEchart = new THREE . TextureLoader ( ) . load ( customEchart . ...
收起
在SharePoint 2013中使用JSLink + Callout 展示信息（2）
千次阅读 2014-10-26 03:33:37
在SharePoint 2013中使用JSLink + Callout 展示信息（1）中介绍了JSLink的简单用法，这篇博客继续结合Callout实现一个可以展示信息的自定义field。上一篇文章中我们已经自定义了一个field，这里需要修改的就是 ...
收起
field
asp.net网站前台通过DataList展示信息的代码
千次阅读 2011-08-11 07:51:59
//aspx页面中 ...id=(Container.DataItem,"id") ... //获取前6条分类供求信息 dlZP.DataSource = operation.SelectLeaguerInfo(true, "公司公告", 6);//dlZP与前台的id相同 dlZP.DataBind(); }
收起
asp.net class server table
后台获取图片信息，在页面展示
千次阅读 2018-05-26 11:54:27
做的一个项目，有一个展示信息的页面，同时要展示相应的图片。一开始是想用jQuery easyUI的datagrid，但是这个显示效果不好，会出现表格的一些特性，展示图片时会有加减号控制。其实是我想多了，图片就放在本地，...
收起
智慧景区信息展示系统
2020-03-23 10:28:56
2.3.5 信息展示系统 信息展示系统，主要用于为游客提供旅游文本、多媒体等信息的自助查询检索服务。信息展示系统的建设应重点考虑展示内容的美观和生动性、游人操作的易用性以及数据更新的简单快捷等因素。在表现...
收起
3用户信息展示
千次阅读 2017-02-23 15:33:10
上一篇完成了AdminLTE的整合，接下来就要把页面中的逻辑一一填充进来了，先从展示用户信息开始吧。我们需要用户点击账户信息按钮后被导航到账户信息页。所以需要给账户信息按钮添加一个点击事件，事件被触发时调用...
收起
vue echart
微信小程序信息展示列表
千次阅读 2018-12-30 21:42:30
微信小程序信息展示列表效果展示: 代码展示: wxml <view class="head"> <view class="head_item">分类</view> <view class="ring&...
收起
Springboot+easyUI分栏展示数据库信息及详细信息
千次阅读 2017-12-21 15:47:07
信息及详细信息的展示本篇博客主要实现信息及用户信息详情的展示，也就是说将一个frame分成两部分，左边一部分显示数据库中的信息，右边一部分显示详细信息（也就是你点击左边一部分时，右边会通过获取左边选中...
收起
数据库 ajax
sql去重并展示所有信息
2019-04-20 18:01:48
sql去重并展示所有信息 //去重并展示所有信息 //注意:is_delete = 0如果加在外侧数据会减少,所以放在去重sql里 select * from company_user where id in (select min(id) from company_user where is_delete = 0 ...
收起
filebeat展示网络设备日志信息
千次阅读 2019-08-07 10:43:55
前面几篇文章介绍了从kibana到filebeat的搭建以及使用，这篇文章介绍利用filebeat收集，展示网络设备的日志信息，由于官网介绍目前只能展示思科ASA防火墙的信息，故我们换一种方式展示华为设备的日志信息 ...
收起
filebeat
微信小程序新闻信息列表展示
千次阅读 2019-01-03 04:23:13
微信小程序信息展示列表 wxml  <view class='haibao' bindtap="seeDetail" id="{{item.activityContentId}}" > <swiper indicator-dots=...
收起
百度地图省市区县 信息展示
万次阅读 多人点赞 2017-09-21 15:10:47
先上效果图（PS：数据为mock数据）： ...1.展示所有省份门店汇总信息，且门店数越大，标记越深，标记越大（热力效果） 2.悬停标记，展示标记对应的省市区县的详细信息，并显示该省市区县的行政区划 3.点击
收起
百度地图地图开发