echarts结合百度地图使用

chen'mo
2022-11-04 / 0 评论 / 13,935 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年11月04日,已超过766天没有更新,若内容或图片失效,请留言反馈。

在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>
1
Typedown – 免费轻量级 Markdown 编辑器
« 上一篇 11-01
Linux一键更换国内软件源脚本:LinuxMirrors
下一篇 » 11-05

评论 (0)

插入图片