需要申请百度地图ak;
//引入百度地图,echarts和echarts的百度地图扩展bmap
<script src="./echarts/echarts.js"></script>
<script src="./js/bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
//必须给容器一个宽高
<div id="main" style="width:500px;height:500px;"></div>
//初始化echarts,获得图表对象
var echartsModal = echarts.init(document.getElementById('main'));
echartsModal.setOption({
bmap: {
roam: true,//用户是否可以拖放和缩放地图
opt: {
enableMapClick: false, //是否开启底图可点功能
minZoom: 9, //最小缩放级别
maxZoom: 16 //最大缩放级别
}
},
series: [
{
name: "A级",
type: 'effectScatter',
coordinateSystem: 'bmap',//地图类型
data: aShops,
symbol: 'circle',
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
animation: false,//必须设置animation: false,否则拖动地图,散点图的移动将会发生延迟
itemStyle: {
normal: {
color: "rgba(255,98,96,1)", //标志颜色
}
},
zlevel: 6
},
{
name: "B级",
type: 'effectScatter',
coordinateSystem: 'bmap',
data: bShops,
symbol: 'circle',
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
animation: false,
itemStyle: {
normal: {
color: "rgba(0,175,255,1)", //标志颜色
}
},
zlevel: 6
},
]
});
//添加百度地图插件bmp,获得地图对象,获取到的百度地图对象适用于所有的百度地图的接口。
var mapModal = echartsModal.getModel().getComponent('bmap').getBMap();
//设置地图的中心点和缩放级别
mapModal.centerAndZoom(new BMap.Point(113.1357014149, 29.3632163433), 10);
拖动地图,出现部分散点在地图上跟随拖动方向重复一直渲染,经过排查,最后发现是后端返回的散点的id有重复的出现,重复id的散点就会出现这种情况。