关于Echarts地图扩展百度地图的操作详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Rava722/article/details/53032598

1,在通过Echarts做地图操作的时候有三种方式:1种是利用Echarts官网的地图文件(js,json)地图导入到页面中进行展示,这些例子官网很多。还有就是SVG图片结合Echarts,这种操作在Echarts3.0之后我不是很清楚,所以在Echarts的2.2.7版本时可以这么做:在js中创建Echarts的基本环节,然后通过ajax读取svg然后再回调里面进行操作。

第三种就是:利用百度地图进行扩展

2,首先你需要在百度地图上申请一个类似开发账号的东西,将来在jsp中接入百度地图需要这个ak,还有就是Echarts操作的一些基本文件主要是两个一个是map.js一个是BMap下面的main.js这两个文件都可以在下载的Echarts的压缩包中找到,下载地址:http://echarts.baidu.com/build/echarts-2.2.7.zip


3,开始正式的操作:

在jsp中引入jQuery,引入echarts的js,接入百度地图:

<script type="text/javascript" src="${pageContext.request.contextPath}/js/commons/jquery-1.8.0.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/echart/echarts.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=
********"></script>//ak后面的就是你在百度地图申请的接入key


然后就是创建你的div,用于展示你的地图啦,


剩下的操作就是比较复杂的地图的操作了,都是js代码所以需要写在外部js里面即可,然后将外部js引入


外部js:

(function () {

require.config({
        paths: {
            echarts: 'js/echart'
//项目中前面所提到的map.js的文件路径
        },
        packages: [
            {
                name: 'BMap',
                              //固定写法需要引入BMap
                location: 'Bmap',
      //项目中全面所提到的Bmap下的main.js的文件路径
                main: 'main
  '
            }
        ]
    });


    require(
    [
        'echarts',
        'BMap',
        'echarts/chart/map'
    ],
    function (echarts, BMapExtension) {
 

 $('#main').css({
            height:500,
            width: 1200
        });


        // 初始化地图
        var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
            enableMapClick: false
        });
        var map = BMapExt.getMap();
        var container = BMapExt.getEchartsContainer();


        var startPoint = {
            x: 124.114129,
            y: 47.550339
        };


        var point = new BMap.Point(startPoint.x, startPoint.y);
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);


option ={

//这里进行地图的具体详细设置,主要series里面type的类型为map而mapType的类型为none: type:'map',
                    mapType: 'none',

}


 var myChart = BMapExt.initECharts(container);
        window.onresize = myChart.onresize;
        BMapExt.setOption(option);




}

}


这样就可以为Echarts扩展百度地图了,但是这些操作还是需要一个前提。你的项目必须可以接入外网,不然怎么接入百度地图啊。以上为个人的一些操作过程,达成了初步的目标,将百度地图接入,后续会继续为大家带来具体的详细的关于画点,画线,以及函数动画的操作,敬请期待?






展开阅读全文

没有更多推荐了,返回首页