echarts百度地图热力图踩坑

image.png

百度地图做一个demo进来很简单，接入数据的时候也不难 但是提测的时候一堆bug,当时就懵了

image.png

其实原本我是不想用echarts+百度地图做这个东西的
但是看上图，百度地图没有这个拉杆拉动的时候显示，热力的变换（在echarts中是visualMap插件）
于是没办法 才想到了结合echarts使用
但是测试提的第一个bug就是拉动这个visualMap的时候，地图会跟着动，
找了n多方法，先是禁掉地图的所有拉伸，双击，滚轮事件，但是没用，拉伸visualMap 的时候还是会动，在一度以为解决不了的时候，试了一个方法搞定就是把BMap插件的roam:true改成roam:false
这个方法就是echarts结合百度地图使用的插件 BMap我在上面介绍的如何使用echarts百度地图热力图里面有介绍，https://www.jianshu.com/p/deaf251f7e57

 bmap: {
            center: [117.1843390000, 34.2094400000],
            zoom: 17,
            roam: false //这个地方改成false
          },

这就可以了 随便拉伸都不会动了
第二个问题是我做人流迁移图的时候背景，说是要黑色的，这个还是简单的

   var mapStyle = {
          features: ["road", "building", "water", "land"],//隐藏地图上的"poi",
          style: "dark",
        };
        this.map.setMapStyle(mapStyle);

第三个问题适配的问题
百度地图不知道你要显示的地图是多大面积所以在小屏上显示的时候热力图有数据的时候会超出你的容器，用户体验不好，而你的拉伸，双击，滚轮事件都因为 roam: false 而失效了，这个时候本来是没有解决办法的，所以和产品商量决定加两个按钮，控制地图的放大和缩小

image.png

  getBigMap(){
        this.map.zoomIn()
      },
      getSmallMap(){
        this.map.zoomOut()
      },

曲线救国