简单实现echart生成地图数据(china.ja或bmap.js百度云API)

前言

    作为一个前端可视化框架,本以为基于地图的数据映射跟基本图形一样只要导导JSON数据就可以了(小声bb其实就是),结果总是加载不出。。。如下图:

简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第1张图片

没有图呀!!!怎么回事? 原来用错了bmap.js文件。正确的是:简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第2张图片

错误的是:简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第3张图片

俩种加载地图的方法:

一:加载地图.js文件

官网已经下架了这种文件直接下载。但是,他在下载中给我们留了github去下载,通过官网的dist地址追溯到父目录,可以找到,https://github.com/apache/incubator-echarts/tree/4.7.0:

简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第4张图片

当然,直接下好整个项目zip再去找更好,不过别像我一样,导入了错误的文件 TT。。。浪费我大量时间。

源码:




    
    第一个 ECharts 实例






    
    
    

效果:简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第5张图片 

具体参数设置看官网API即可

 

二:使用百度地图API做地图

这个应该是最好的,也很简单:http://lbsyun.baidu.com/,注册百度开发者,一分钟的样子。翻到最底下。

简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第6张图片

如何创建应用,名字随便输入,web选中了浏览器端,白名单因为是测试输入*即可(上线还是认真输入好!免得被盗用),没错全部信息就在这儿,没了。。。给我一个毁灭世界的接口的来由。。。

 把方法一的dist中的bmap.js和echarts.min.js还有API导入进去:



当然,你不下载用服务器的也可以: 



body代码:


    
    
    

实现效果:简单实现echart生成地图数据(china.ja或bmap.js百度云API)_第7张图片

 

动态数据及JSON文本导入点击这里

 

 

你可能感兴趣的:(前端小知识)