console
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'),null,{renderer:'canvas'}),option;
function loadMap(){
let ek = document.getElementById('map_key') , key = ek.value, t = (new Date).getTime();
if(!key){ alert('请输入地图key'); return; }
ek.disabled = true;
addScript('https://api.map.baidu.com/getscript?v=3.0&ak='+key+'&services=&t='+t);
myChart.showLoading();
setTimeout(()=>{ initMap();},1000)
}
function initMap(){
option = {
title: {text: 'echarts-百度地图-打点', left: 'center'},
bmap: {
center: [116.404, 39.915], zoom: 10, roam: true
},
series: [
{
name: 'addr', symbol: 'pin',
type: 'scatter',
coordinateSystem: 'bmap',
data: [{"name":"北京","value":[116.46, 39.92, 79 ] }]
}]
};
myChart.hideLoading();
myChart.setOption(option);
myChart.on('click', (params)=> {
console.log('-->', params);
});
var bm = myChart.getModel().getComponent('bmap').getBMap();
bm.addEventListener('click',e=>{
console.log('地图坐标', e.point);
option.series[0].data = [{"name":"标记","value":[e.point.lng, e.point.lat, 50 ] }];
myChart.setOption(option);
})
}
<div>
<input type="text" id="map_key" placeholder="百度地图key" value=""/>
<button onclick="loadMap()">加载</button>
</div>
<div id="ec_map" style="height:860px;width:920px">echarts-百度地图,官方示例</div>