echart利用百度地图

### 如何在 ECharts 中集成百度地图

#### 获取百度地图的 AK 密钥
为了能够正常使用百度地图服务，在项目中需要先申请一个 API Key (AK)[^2]。

#### 引入必要的库文件
确保页面已经加载了 `echarts` 和 `bmap` 扩展包。可以通过 CDN 或者本地路径来引入这些资源：

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<!-- 加载百度地图扩展 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@latest/dist/extension/bmap.min.js"></script>

#### 初始化容器并创建图表对象
找到用于显示地图的 DOM 容器，并通过该容器初始化一个新的 ECharts 实例[^1]:

let mapDiv = document.getElementById("material_map_box");
let myChart = echarts.init(mapDiv);

#### 设置配置项与数据源
设置好地图类型的 option 配置参数，这里特别需要注意的是 series 类型应设为 `'bmap'` 并指定相应的属性值：

myChart.setOption({
    bmap: {
        center: [116.407526, 39.90403], // 地图中心点坐标
        zoom: 10,                        // 初始缩放级别
        roam: true                       // 是否允许拖拽平移和缩放操作
    },
    series : [
        {
            name:'地点',
            type:'scatter',              // 散点图类型可以展示具体位置标记
            coordinateSystem: 'bmap',
            data:[...this.options.data],
            symbolSize:function(val){
                return val[2]*10;         // 动态调整散点大小
            }
        }
    ]
});

#### 自定义样式和其他功能优化
可以根据需求进一步定制地图外观以及交互行为，比如修改背景颜色、隐藏默认控件等。

#### 移除百度 logo（可选）
如果希望去除百度地图自带的品牌标识，则可以在初始化完成后执行如下 JavaScript 语句:

setTimeout(function(){
    var anchor = myChart.getModel().getComponent('bmap').getBMap()._anchor;
    anchor && anchor.hide();
}, 1000);