只用4行懒人代码，解决echarts地图被拖拽出容器的问题！

起因是测试小哥觉得首页的地图被拖出可视区域不合理 ，让我解决一下，网上搜了一圈也没搜到解决方法。就去查官网的文档，一步步调试嘛。话不多说，解决思路放下面了。

initMapChart() {
      echarts.registerMap('custom_map', {geoJSON: map_json});
      this.chartMap = echarts.init(document.getElementById("echartsmap"));

      var option = {
        geo: [{
          map: 'custom_map',
          zoom: 1.2, //视角缩放比例
          animationDurationUpdate: 0,
          scaleLimit:{
            min:1200,
          },
          layoutCenter: ['43%', '50%'],
          layoutSize: 480,
          center:this.mapcenter,    //地图初始化时的中心点
          label: {
            show: true,
            color: "#ffffff",
            fontSize: 15,
            emphasis: {
              show: true,
              color: "#ffffff",
            }
          },
          roam: true, //开启缩放和平移
          zlevel: 4,
          itemStyle: {
            borderColor: '#73c0de',
            borderWidth: 1,

            areaColor: "#177dc7",

     
            shadowColor: '#1148b3',
            shadowOffsetX: 0,
            shadowOffsetY: 15,
            shadowBlur: 1,
            emphasis: {
              // 高亮时候的颜色设置
              areaColor: "#143ed4",
            }
          },
        },
        ],
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 5,
          symbol: 'pin',
          symbolSize: 40,
          label: {
            normal: {
              formatter: '{b}',
              position: 'top',
              offset: [1, 6],
              show: true,
              textStyle: {
                color: '#b62a0a',
                fontSize: 20,
              }
            }
          },
          itemStyle: {
            normal: {
              show: true,
              color: '#b62a0a',
              emphasis: {
                show: true,
                color: "#b87208",
              }
            }
          },
          animation:false,
          data: this.chartData
        },]
      }

      this.chartMap.setOption(option);
      this.chartMap.on('click','series.scatter',(args)=>{
        let linkpath = this.maplink[args.name];
        if(!$.isEmptyObject(linkpath)){
          this.$router.push({path:linkpath}).catch(()=>{});
        }
      })
      this.chartMap.on('georoam', param => {
        var option = this.chartMap.getOption()
        if (Math.abs(this.chartMap.getOption().geo[0].center[0]-this.mapcenter[0]) > 0.08
          || Math.abs(this.chartMap.getOption().geo[0].center[1]-this.mapcenter[1]) > 0.08){
          //option.geo[0].center = this.mapcenter
          // this.chartMap.setOption()
          this.initMapChart()
        }
        // console.log(this.chartMap.getDom())
        // console.log(this.chartMap.getOption().geo[0].center[0]-this.mapcenter[0])
        // console.log(this.chartMap.getOption().geo[0].center[1]-this.mapcenter[1])
        // console.log(this.mapcenter)
      })
    }

原因：就是地图的中心坐标离开了可视区域

解决方法：因为我这个地图的中心点是从后台获取过来的，所以只要在绑定的georoam事件中，去判断当前地图中心和原始位置的差值大于某个范围，那么就可以重新初始化一下地图啦（或者重新设置一下option的中心点再setOption也可以）。

至于我这里为啥直接写了0.08，肯定是我手动调试出来的大概范围啊，我用的地图很小，大概只有一个县那么大。如果你想精确计算，或者不让地图嗖的一下弹回原始中心，那肯定是知道地图的上下左右四个边界角坐标最好。

注意：要关掉series里的动画，不然scatter和geo不同步。