在echarts中使用百度地图,卫星地图
<!-- 首先引入百度地图 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=你的秘钥&__ec_v__=20190126"></script>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
在引入 http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js
时,我们把源文件打开,源码中的 var c = t.__bmap = new BMap.Map(m)
这个就是新建的一个地图,这个使用的是百度地图默认的地图类型 BMAP_NORMAL_MAP
可以对这个位置就行修改,修改为 var c = t.__bmap = new BMap.Map(m, {mapType:BMAP_HYBRID_MAP})
,这样就重新引入这个新文件就可以了
在echarts的配置项option中加入bmp
option = {
// ...
bmap: {
center: [104.114129, 38.550339], // 地图中心点
zoom: 5,
roam: true
},
series: []
// ....
}
如果还要在地图上画图,需要在 series的每一项中加入
option = {
// ...
bmap: {
center: [104.114129, 38.550339], // 地图中心点
zoom: 5,
roam: true
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'bmap',
// ...
}, {
type: 'effectScatter',
coordinateSystem: 'bmap',
// ...
}
]
}
效果图
具体地图类型参考百度地图api: http://lbsyun.baidu.com/index.php?title=jspopular, 以下是百度地图的示例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));