echarts3与百度地图结合

原创作者地址:http://blog.csdn.net/yc_1993/article/details/52431989

1、百度AK的申请 

2、下载echart.js,bmap.js

3、引入echart.js,bmap.js以及Ak

4、配置option

var option = {
	        bmap: {
	        center: [113.388275,22.94326], //中心坐标
	        zoom: 5,   //放大的参数,最大为24
	        roam: true,
	        mapStyle: {
	                       styleJson: [
	          {
	                    'featureType': 'land',     //调整土地颜色
	                    'elementType': 'geometry',
	                    'stylers': {
	                              'color': '#081734'
	                    }
	          },
	          {
	                    'featureType': 'building',   //调整建筑物颜色
	                    'elementType': 'geometry',
	                    'stylers': {
	                              'color': '#04406F'
	                    }
	          },
	         {
	                    'featureType': 'building',   //调整建筑物标签是否可视
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'highway',     //调整高速道路颜色
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'color': '#015B99'
	                    }
	          },
	          {
	                    'featureType': 'highway',    //调整高速名字是否可视
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'arterial',   //调整一些干道颜色
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'color':'#003051'
	                    }
	          },
	          {
	                    'featureType': 'arterial',
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'green',
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'water',
	                    'elementType': 'geometry',
	                    'stylers': {
	                              'color': '#044161'
	                    }
	          },
	          {
	                    'featureType': 'subway',    //调整地铁颜色
	                    'elementType': 'geometry.stroke',
	                    'stylers': {
	                    'color': '#003051'
	                    }
	          },
	          {
	                    'featureType': 'subway',
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'railway',
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'railway',
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'all',     //调整所有的标签的边缘颜色
	                    'elementType': 'labels.text.stroke',
	                    'stylers': {
	                              'color': '#313131'
	                    }
	          },
	          {
	                    'featureType': 'all',     //调整所有标签的填充颜色
	                    'elementType': 'labels.text.fill',
	                    'stylers': {
	                              'color': '#FFFFFF'
	                    }
	          },
	          {
	                    'featureType': 'manmade',   
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'manmade',
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'local',
	                    'elementType': 'geometry',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'local',
	                    'elementType': 'labels',
	                    'stylers': {
	                    'visibility': 'off'
	                    }
	          },
	          {
	                    'featureType': 'subway',
	                    'elementType': 'geometry',
	                    'stylers': {
	                              'lightness': -65
	                    }
	          },
	          {
	                    'featureType': 'railway',
	                    'elementType': 'all',
	                    'stylers': {
	                              'lightness': -40
	                    }
	          },
	          {
	                    'featureType': 'boundary',
	                    'elementType': 'geometry',
	                    'stylers': {
	                              'color': '#8b8787',
	                              'weight': '1',
	                              'lightness': -29
	                    }
	          }]
	        }
	        },
	        series: [{
	            type: 'map',
	            mapType: 'china',
	            coordinateSystem: 'bmap'
	        }]
	    };

 其实就是把echarts地图的坐标系换成百度地图




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值