在echarts中使用百度地图，卫星地图

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

zh阿飞

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

阅读量1w

点赞数 7

分类专栏： echarts JavaScript

本文链接：https://blog.csdn.net/z1832729975/article/details/89798959

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

在echarts中使用百度地图，卫星地图

<!-- 首先引入百度地图 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
	<script src="https://api.map.baidu.com/api?v=2.0&ak=你的秘钥&__ec_v__=20190126"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

在引入 http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js 时，我们把源文件打开，源码中的 var c = t.__bmap = new BMap.Map(m) 这个就是新建的一个地图，这个使用的是百度地图默认的地图类型 BMAP_NORMAL_MAP

可以对这个位置就行修改，修改为 var c = t.__bmap = new BMap.Map(m, {mapType:BMAP_HYBRID_MAP}),这样就重新引入这个新文件就可以了
在这里插入图片描述

在echarts的配置项option中加入bmp

option = {
	// ...
    bmap: {
            center: [104.114129, 38.550339], // 地图中心点
			zoom: 5,
			roam: true
     },
    series: []
    // ....
}

如果还要在地图上画图，需要在 series的每一项中加入

option = {
    // ...
     bmap: {
            center: [104.114129, 38.550339], // 地图中心点
			zoom: 5,
			roam: true
     },
    series: [
        {
             type: 'effectScatter',
             coordinateSystem: 'bmap',
            // ...
        }, {
             type: 'effectScatter',
             coordinateSystem: 'bmap',
            // ...
        }
        
    ]
}

效果图

在这里插入图片描述

具体地图类型参考百度地图api: http://lbsyun.baidu.com/index.php?title=jspopular, 以下是百度地图的示例

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));

zh阿飞

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
在echarts中使用百度地图，卫星地图

在echarts中始用百度地图，卫星地图<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> <script src="https://api.map.baidu.com/api?v=2....
复制链接

扫一扫

专栏目录