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

最新推荐文章于 2024-05-24 09:50:34 发布

置顶

小帽集团

最新推荐文章于 2024-05-24 09:50:34 发布

阅读量1.6w

点赞数 9

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

本文链接：https://blog.csdn.net/qq_37592561/article/details/89875557

版权

Echarts 与高德地图/百度地图结合风可视化实例Demo

- 声明
正文

声明

    原例与数据来源于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

最低0.47元/天解锁文章

小帽集团

关注

9
点赞
踩
45

收藏

觉得还不错? 一键收藏
36
评论
Echarts与高德地图/百度地图结合风可视化实例Demo 百度未授权使用地图api问题解决 echart实例中json文件 echarts-amap.min.js

Echarts 与高德地图/百度地图结合风可视化实例Demo声明正文Echarts结合百度地图Echarts结合高德地图声明原例与数据来源于Echarts 官方实例 - GL实例中 GL路径图：Global Wind Visualization。原例官网地址：https://echarts.baidu.com/examples/index.html#chart-type...
复制链接

扫一扫