SOURCE

function addScript(url) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.head.appendChild(script);
}
var myChart = echarts.init(document.getElementById('ec_map'));
var option = {graphic:{elements:[{
    type: 'text',left: 'center',top: 'center',
    style: {text: '等待加载地图',fontSize: 80,fontWeight: 'bold',}
}]}};
myChart.setOption(option);
function loadMap(){
    let ek = document.getElementById('map_key') , key = ek.value;
    if(!key){ alert('请输入地图key'); return; }
    ek.disabled = true;
    window.BMAP_PROTOCOL = "https";
    window.BMap_loadScriptTime = (new Date).getTime();
    //官网地图key-可能随时失效 KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu
    //https://api.map.baidu.com/api?v=3.0&ak=
    //https://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20250113173049
    addScript('https://api.map.baidu.com/getscript?v=3.0&ak='+key+'&services=&t='+(new Date).getTime());
    myChart.clear();
    myChart.showLoading();
    setTimeout(()=>{ initMap();},1000)
}
function initMap(){
    option = {
        title: {//标题
            text: 'echarts-百度地图', left: 'center', textStyle: { color: '#fff' },
            subtext: 'echarts官网', sublink: 'https://echarts.apache.org/'
        },
        bmap: {//百度地图
            center: [104.114129, 37.550339], zoom: 7, roam: true,
            mapStyle: {
            styleJson: [
{featureType:'water',elementType:'all',stylers:{color:'#044161'}},
{featureType: 'land',elementType: 'all',stylers: {color: '#004981'}},
{featureType: 'boundary',elementType: 'geometry',stylers: {color: '#064f85'}},
{featureType: 'railway',elementType: 'all',stylers: {visibility: 'off'}},
{featureType: 'highway',elementType: 'geometry',stylers: {color: '#004981'}},
{featureType: 'highway',elementType: 'geometry.fill',stylers: {color: '#005b96',lightness: 1}},
{featureType: 'highway',elementType: 'labels',stylers: {visibility: 'off'}},
{featureType: 'arterial',elementType: 'geometry',stylers: {color: '#004981'}},
{featureType: 'arterial',elementType: 'geometry.fill',stylers: {color: '#00508b'}},
{featureType: 'poi',elementType: 'all',stylers: {visibility: 'off'}},
{featureType: 'green',elementType: 'all',stylers: {color: '#056197',visibility: 'off'}},
{featureType: 'subway',elementType: 'all',stylers: {visibility: 'off'}},
{featureType:'manmade',elementType:'all',stylers:{visibility:'off'}},
{featureType:'local',elementType:'all',stylers:{visibility:'off'}},
{featureType:'arterial',elementType:'labels',stylers:{visibility:'off'}},
{featureType:'boundary',elementType:'geometry.fill',stylers:{color:'#029fd4'}},
{featureType:'building',elementType:'all',stylers:{color:'#1a5787'}},
{featureType:'label',elementType:'all',stylers:{visibility:'off'}}
            ]}
        },
        series: [
        {
            name: 'addr',
            type: 'scatter',//散点
            coordinateSystem: 'bmap',
            data: []
        }]
    };
    myChart.hideLoading();
    myChart.setOption(option);
}

<div>
    <input type="text" id="map_key" placeholder="百度地图key"/>
    <button onclick="loadMap()">加载</button>
</div>
<div id="ec_map" style="height:860px;width:920px">echarts-百度地图，官方示例</div>