在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.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中使用百度地图,卫星地图_第1张图片
在echarts中使用百度地图,卫星地图_第2张图片
在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
        ]}));	  

你可能感兴趣的:(echarts,JavaScript)