echarts(十三) 结合百度地图使用

最新推荐文章于 2024-08-05 05:00:00 发布

我在人间贩卖青春

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量2.7k

点赞数

分类专栏： ecarts 文章标签：前端数据可视化百度地图 echarts

本文链接：https://blog.csdn.net/weixin_44178305/article/details/113064193

版权

ecarts 专栏收录该内容

15 篇文章 5 订阅

订阅专栏

百度地图

百度地图的使用方法

在这里插入图片描述

在HTML 中引入百度地图，详情见文档

<script type=“text/javascript” src=“http://api.map.baidu.com/api?v=3.0&ak=****"></script>

在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
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
echarts(十三) 结合百度地图使用

百度地图百度地图开放平台地址社区贡献者维护的Apache ECharts (incubating)相关作品百度地图的使用方法在HTML 中引入百度地图，详情见文档<script type=“text/javascript” src=“http://api.map.baidu.com/api?v=3.0&ak=****"></script>在echarts中使用百度地图引入 echarts.js、bmap.js 以及 https://api.map.
复制链接

扫一扫

专栏目录