百度地图结合echarts并添加行政区块
作者：LJaer
链接：https://www.zhihu.com/question/49251513/answer/125728764
来源：知乎
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 新添加的jQuery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- End -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.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="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '热力图与百度地图扩展';
$.get('data.json', function (data) {
var data = eval("("+data+")");
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
myChart.setOption(option = {
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
if (!app.inNode) {
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
},"text");
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
百度地图结合echarts并添加行政区块的更多相关文章
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 百度地图结合ECharts实现复杂覆盖物(Overlay)
先来看效果图 一 前置知识 官方Overlay-覆盖物的抽象基类 方法 返回值 描述 initialize(map: Map) HTMLElement 抽象方法,用于初始化覆盖物,当调用map.add ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- Android百度地图开发02之添加覆盖物 + 地理编码和反地理编码
下面来看一下地图上覆盖物的添加,以及地理编码和反地理编码. 添加覆盖物 在地图上添加覆盖物,一般需要以下几个步骤: 1. 定义坐标点,有可能是一个,有可能是多个(比如:多边形覆盖物). 2. 构造Ov ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 【教程】高德地图使用ECharts实现数据可视化
关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...
随机推荐
- 学习_单片机/嵌入式_的资源链接。——Arvin
---恢复内容开始--- +单片机 -郭天祥的51单片机入门视频(链接: https://pan.baidu.com/s/1sl3xNDr 密码: 1zik) -51单片机20元购买资料公开(链接: ...
- HBase 的表结构
HBase 的表结构 2016-10-13 杜亦舒 HBase 是一个NoSQL数据库,用于处理海量数据,可以支持10亿行百万列的大表,下面就了解一下数据是如何存放在HBase表中的 关系型数据库的表 ...
- .Net4.0的网站在IE10、IE11出现“__doPostBack未定义”的解决办法。
方法一.浏览器设置成兼容模式. 方法二.安装服务器版的.Net40的补丁.http://download.csdn.net/detail/5653325/6642051 方法三.点击VS的工具菜单-- ...
- java, listmap2json, fastjson
import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;impor ...
- Excel字符串连接
1.利用&连接. ="('"&A4&"','"&B4&"','"&C4&" ...
- 使用JavaMail实现发送邮件功能
package com.dunn.model; import java.util.Properties; import javax.mail.Address; import javax.mail.Me ...
- MySQL学习记录--操作时间数据
1.返回日期的时间函数 date_add() : 可以为指定日期增加/减少任意一段时间间隔.下面举例将当前日期增加一个月和减少一个月 mysql month) as add_one_month; +- ...
- 移动端设置字体px转换rem的脚本
(function (){ var _self = this; _self.width = 640;//设置默认最大宽度 _self.fontSize = 100;//默认字体大小 _self.wid ...
- Guava------------Cache使用方法
简单从这几个方面描述一下如何使用Cache,对Cache的各种原理介绍此处不涉及. 1.使用场景 2.如何使用Cache 3.创建方式 4. 如何和Spring搭配使用 +-------------- ...
- Redis入门学习笔记一
Redis 简要描述: 1. Redis 是啥 ? Redis 英文名称全称为: Remote Dictionary Server ,中译为远程字典服务器. 是一款区分于磁盘数据库如(Mysql)的 ...