首页 > 其他 > 详细

地图的常见效果

时间:2020-12-26 17:48:41      阅读:24      评论:0      收藏:0      [点我收藏+]

显示某个区域步骤:

  (1)加载该区域的矢量地图数据

  (2)通过registerMap注册到echarts全局对象中

  (3)指明geo配置下的type和map属性

  (4)通过zoom放大该区域

  (5)通过center定位中心点

<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>

<div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(main));
        // ret是山东省的矢量地图数据
        $.get(json/map/shandong.json, function (ret) {
            console.log(ret)
            echarts.registerMap(anhuiMap, ret);
            var option = {
                geo: {
                    type: map,
                    map: anhuiMap, // anhuiMap要和registerMap的第一个数据保持一致
                    roam: true, // 可以进行拖到和滚轮缩放
                    label:{
                        show:true // 一开始就显示省份
                    },
                    zoom:1, // 初始化缩放比例
                    // 这个坐标值可以通过地图矢量数据ret获取到
                    center:[120.355173, 36.082982] // 地图中心点
                }
            };
            myChart.setOption(option);
        })
    </script>

 

地图的常见效果

原文:https://www.cnblogs.com/hwy6/p/14193454.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!