在HTML 中引入百度地图，详情见文档
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld
`
在echarts中使用百度地图
引入 echarts.js、bmap.js 以及 https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key；
在 option 中设置 bmap
获得百度地图实例：chart.getModel().getComponent(‘bmap’).getBMap()
根据百度地图 API 做进一步设置。
注：对于百度地图的配置，既可以在echarts 配置项的bmap 中设置，也可以将百度地图的实例从echarts 中提取出来，然后根据百度地图的api 对其进行设置。
echarts中对百度地图使用的说明
基于html的原生百度地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<script>
var map = new BMap.Map("container");
//地图中心位
var point = new BMap.Point(116.404, 39.915);
//地图初始化，同时设置地图展示级别
map.centerAndZoom(point, 15);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//控件
map.addControl(new BMap.NavigationControl());
// 创建标注
var marker = new BMap.Marker(point);
// 将标注添加到地图中
map.addOverlay(marker);
//样式
map.setMapStyleV2({
styleId: '5453dc64d711215271444d4abeaf6b44'
});
</script>
</body>
</html>结合echarts使用百度地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<style>
html{height: 100%}
body{height: 100%;margin: 0}
#main{
height: 100%;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=EcMeTlWuNyyqL4GwZT5Nmlj9mtpvhE9Y"></script>
<script>
let dom = document.getElementById("main");
let chart = echarts.init(dom);
const option = {
/*
* bmap 百度地图
* center[经度,纬度] 地图中心点位，如[116.404, 39.915]
* zoom 缩放级别
* roam 是否可以拖拽缩放
* scale
* move
* true
* */
bmap:{
center:[103.4965,36.45],
zoom:15,
roam:'true',
}
};
chart.setOption(option);
</script>
</body>
</html>
评论 (0)