Echarts与高德地图/百度地图结合风可视化实例Demo 百度未授权使用地图api问题解决 echart实例中json文件 echarts-amap.min.js

最新推荐文章于 2025-02-25 17:30:40 发布

置顶

小帽集团

最新推荐文章于 2025-02-25 17:30:40 发布

阅读量1.9w

点赞数 10

分类专栏：地图文章标签： echarts 高德地图百度地图

本文链接：https://blog.youkuaiyun.com/qq_37592561/article/details/89875557

版权

本文介绍了如何将Echarts与百度地图、高德地图结合实现风可视化实例，详细讲解了申请AK的过程，并提供了解决百度地图API未授权问题的方法。同时，给出了Echarts结合高德地图的示例代码，注意高德地图坐标系统与json数据的适应性问题。附带了关键代码分析和json数据来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明

    原例与数据来源于Echarts 官方实例 - GL实例 中 GL路径图：Global Wind Visualization。
    原例官网地址：https://echarts.baidu.com/examples/index.html#chart-type-flowGL
    原文demo地址：https://echarts.baidu.com/examples/editor.html?c=global-wind-visualization&gl=1
	本文只作些许改动及样例对比。

在这里插入图片描述

正文

Echarts结合百度地图

官方实例运行结果
其实你会发现，下载下来的官方实例是没办法跑的，原因很简单，需要替换上你的百度AK

AK申请地址：自行移步 http://lbsyun.baidu.com/index.php?title=jspopular 申请。

申请时注意填写白名称，如下图红框，输入* 即可
ak申请界面
申请复制到你的AK，在html头文件中插入以下代码

//百度地图API
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
//jQuery
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

注意：以上两个文件必须插入，第一个是对百度地图api进行调用，第二个是调用jQuery，缺少后对$符调用会报错

完整代码：（echarts结合百度地图风可视化实例）

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <title>echarts结合百度地图</title>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=yUg9fMx6ZsbSIkgMjGnCngZsDAO6udmQ"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
   };
option = null;
$.getJSON('json/winds.json', function (windData) {
   

    var data = [];
    var p = 0;
    var maxMag = 0;
    var minMag = Infinity