Echarts+百度API实现地图可视化调用

Echarts

百度旗下的数据可视化平台，提供多种实例，均可以免费下载：

由于我在学校里需要做一个空气污染分布的可视化页面，选择了左下角"Binning on Map",打开实例如下：

傻瓜式修改，左侧修改，右侧预览，基本只要找到需要修改的地方，做简单修改就可实现自己想要的效果。然后，右下角下载，即可获得HTML文件。

问题

直接打开下载的HTML文件会显示：

也就是说，需要有自己的API授权，实例中的API不能直接使用！
最直接的影响是地图不跟随数据图缩放：
地图放大：

地图缩小：

可见色块大小不变化。

API获取

1. 首先登陆百度开发者平台，拉到页面最下端。申请密钥，填写基本信息，邮件确认等流程顺着做，不再赘述：
   

2. 然后在控制台页面，填写自己要使用API的应用基本信息：
   
   可根据需求点选服务，名字随便取，白名单里*代表不对网站做限制。

3. 提交之后，得到AK：
   也就是左起第三列，这里我没有截下边的AK码，接下来就是使用了。

结合使用

4. 打开下载的HTML文件。（使用notepad++等）
   
   加深的一行就是填写AK码的地方，在第一个？之后的v=2.0是api版本，如果版本更新，只需要修改数值即可；"ak="之后的便是AK码，复制替换为自己的AK即可。

5. 在body末尾添加代码：

即可实现基本功能。
测试缩放：

对比之前的图可见，已经可以缩放了。初步完成！

后续

几天后，发现打开html数据色块层又不能和地图同步了，询问了开发者中心的客服，发现原因是默认的mapstyle适用于在线版本，而我只需要在离线环境下使用该html，需要将代码中“mapstyle”修改为“mapstyleV2”，搞定！

bmap: {
        center: [108.93, 34.27],
        
        zoom: 5,
        roam: true,
        mapStyleV2: {
            styleJson: [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }