zoukankan      html  css  js  c++  java
  • Echarts与百度地图结合使用的实践总结

    在项目中,常常会涉及到地图相关的比较炫,相对复杂的效果实现需求,这个时候,将echarts与百度地图结合使用,就势在必行了。以下是自己在实践过程中遇到问题的简要总结:

    如:已经创建了一个echarts实例,var myChart = echarts.init(document.getElementById('allmap'));且进行了相关参数的设置,myChart.setOption(option);
    1.通过echarts实例获取地图实例的方法

    • var bmap = myChart.getModel().getComponent('bmap').getBMap();
    • 获取到的百度地图对象bmap适用于所有的百度地图的接口。
    • 如,设置地图的最大最小缩放级别:
      bmap.setMinZoom(5);
      bmap.setMaxZoom(6);

    2.对bmap进行相关设置操作,但无效的原因及解决办法

    • 问题原因查找的思路:
      1)排除其他代码干扰因素,去官网示例中进行操作,看是否有效。
      2)若有效,比较自己的代码与官网示例的差异,锁定可能存在问题的部分,进行问题排查
    • 解决方法:当数据是通过ajax异步请求得到时,重新执行了myChart.setOption(option)的设置语句,此时,需要重新通过该实例myChart去获取地图对象bmap并进行相关的设置操作。

    3.数据定时刷新,即定时进行myChart.setOption(option)的设置时,地图也进行了重载,导致出现了地图一闪一闪的抖动,影响使用的原因及解决方法

    • 问题原因查找的思路:同上面的问题2
    • 解决方法:myChart.setOption(option,true)去掉该设置语句中的第二个参数true,加上该参数,会导致重绘

    4.在页面定时刷新的过程中,数据不断堆叠,效果堆叠,最后页面地图无法显示,页面崩溃的原因及解决方法

    • 问题原因查找的思路:起初,用到了myChart.clear()方法,起到了一定的作用,但是仍然效果不佳。
      实际上,在查找bug原因时,一定要充分利用浏览器的js断点调试,来查看代码的执行情况,从而明确定位到bug原因,而不能是,单纯地从效果着手解决问题。
    • 解决方法:在每次myChart.setOption(option)时,需要清空series,否则就是不停地往series里面push数据。

    5.点击页面中的DOM节点,如tab选项卡,对应切换地图效果渲染的实现方法

    • 点击切换tab选项卡,对应切换legend的选中状态
    option.legend.selected = {
        '第一项': false,
        '第二项': false,
        '第三项': false
    };
    option.legend.selected[selecteditem] = true;
    

    6.本地运行ok,集成到项目里面,引用文件内报错的原因及解决方案

    • 本地调试ok之后,集成到项目里面,引用的文件报错,对于这种问题,基本上是写的代码的问题,而不是引用文件的问题,所以,着手点应该是集成前后的代码差异,本次的问题原因最后确定是后添加的一个容错处理return导致的。

    7.文件引用的问题

    • 根据需要,引用echarts对应的js文件,比如需要散点图,则echarts.common.min.js就不够用了,所以引用的是echarts.min.js
    • 同时,还需要引用bmap.min.js,来完成echart的地图部分的功能。
  • 相关阅读:
    P1865 A % B Problem
    P1198 [JSOI2008]最大数
    从英语学习写起,收获2013属于我的金秋
    Hadoop--有关Hadoop的启动
    android中文字高亮设置案例
    <Win32_16>来看看标准菜单和右键菜单的玩法
    jQuery 自学笔记—3
    【译】如何精确判断最终用户响应时间过长的原因?
    网络爬虫返回json处理数据
    2013--转变
  • 原文地址:https://www.cnblogs.com/chaoyueqi/p/9830403.html
Copyright © 2011-2022 走看看