echarts引入百度地图
时间: 2023-07-06 16:33:56 浏览: 215
echarts与百度地图结合示例*(官方示例)
3星 · 编辑精心推荐
要在 ECharts 中引入百度地图,需要使用百度地图的 JavaScript API。首先,在 HTML 页面中引入百度地图的 JavaScript API:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图AK"></script>
```
其中,AK 是你的百度地图开发者密钥。接下来,在 ECharts 的 option 中配置地图类型为百度地图:
```javascript
option = {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[116.46, 39.92],
[117.20, 39.13],
[119.30, 39.33],
[121.48, 31.22],
[120.15, 33.38]
],
symbolSize: 20
}]
};
```
其中,bmap 是地图类型,center 是地图中心点坐标,zoom 是地图缩放级别,roam 是是否开启拖拽和缩放。series 中的 coordinateSystem 需要设置为 bmap,表示该系列数据使用百度地图作为坐标系。data 中的数据也需要使用百度地图的经纬度坐标。
阅读全文