Echarts 結合百度地圖使用總結

注：echarts結合china.js使用效果並不好，china.js是矢量圖，顯示的地圖只有一個輪廓，所以正常會選擇百度地圖或者其他地圖配合使用。

一.代碼如下（參考網上，並加入自己的整理）

     function initHotMap(dataArr, domId, title){
          $.get("${ctxStatic}/resources/js/bmap/dataTool.js",function(){
          $.get('${ctxStatic}/resources/js/bmap/bmap.min.js', function () {
              setTimeout(function(){}, 3000);
              var hotMap = echarts.init(document.getElementById(domId));
               
              // 最終需整理成的數據格式 ：[{name:'nanjing',value : [118.77801148172465,32.03102850827321,80]}]

                 var option = {
                      title: {
                          text: title,
                          left: 'center'
                      },
                      tooltip : {
                          trigger: 'item',
                          formatter:function(v){
                              return '';
                          }
                      },
                      bmap: {
                          // 中心為南京
                          center: [118.725551,32.024621],
                          zoom: 16,
                          roam: true,
                          mapStyle: {
                              styleJson: [{
                                  'featureType': 'water',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#d1d1d1'
                                  }
                              }, {
                                  'featureType': 'land',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#f3f3f3'
                                  }
                              }, {
                                  'featureType': 'railway',
                                  'elementType': 'all',
                                  'stylers': {
                                      'visibility': 'off'
                                  }
                              }, {
                                  'featureType': 'highway',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#fdfdfd'
                                  }
                              }, {
                                  'featureType': 'highway',
                                  'elementType': 'labels',
                                  'stylers': {
                                      'visibility': 'all'
                                  }
                              }, {
                                  'featureType': 'arterial',
                                  'elementType': 'geometry',
                                  'stylers': {
                                      'color': '#fefefe'
                                  }
                              }, {
                                  'featureType': 'arterial',
                                  'elementType': 'geometry.fill',
                                  'stylers': {
                                      'color': '#fefefe'
                                  }
                              }, {
                                  'featureType': 'poi',
                                  'elementType': 'all',
                                  'stylers': {
                                      'visibility': 'off'
                                  }
                              }, {
                                  'featureType': 'green',
                                  'elementType': 'all',
                                  'stylers': {
                                      'visibility': 'all'
                                  }
                              }, {
                                  'featureType': 'subway',
                                  'elementType': 'all',
                                  'stylers': {
                                      'visibility': 'off'
                                  }
                              }, {
                                  'featureType': 'manmade',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#d1d1d1'
                                  }
                              }, {
                                  'featureType': 'local',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#d1d1d1'
                                  }
                              }, {
                                  'featureType': 'arterial',
                                  'elementType': 'labels',
                                  'stylers': {
                                      'visibility': 'all'
                                  }
                              }, {
                                  'featureType': 'boundary',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#fefefe'
                                  }
                              }, {
                                  'featureType': 'building',
                                  'elementType': 'all',
                                  'stylers': {
                                      'color': '#d1d1d1'
                                  }
                              }, {
                                  'featureType': 'label',
                                  'elementType': 'labels.text.fill',
                                  'stylers': {
                                      'color': 'purple'
                                  }
                              }]
                          }
                      },
                      series : [
                           {
                              type: 'scatter',
                              coordinateSystem: 'bmap',
                              data: dataArr,
                              symbolSize: function (val) {
                                  return val[2] ;
                              },
                              label: {
                                  normal: {
                                      formatter: '{b}',
                                      position: 'right',
                                      show: false
                                  },
                                  emphasis: {
                                      show: true
                                  }
                              },
                              itemStyle: {
                                  normal: {
                                      color: 'purple'
                                  }
                              }
                          }, 
                          {
                              type: 'effectScatter',
                              coordinateSystem: 'bmap',
                              data:  dataArr.sort(function(a, b){
                                  return b.value[20] - a.value[20];
                              }).slice(0,5),
                              symbolSize: function (val) {
                                  return val[2] ;
                              },
                              showEffectOn: 'render',
                              rippleEffect: {
                                  brushType: 'stroke'
                              },
                              hoverAnimation: true,
                              label: {
                                  normal: {
                                      formatter: '{b}',
                                      position: 'right',
                                      show: true
                                  }
                              },
                              itemStyle: {
                                  normal: {
                                      color: 'purple',
                                      shadowBlur: 10,
                                      shadowColor: '#333'
                                  }
                              },
                              zlevel: 1
                          } 
                      ]
                  };
              
              hotMap.setOption(option);
              
                // 添加百度地圖插件
                var bmap = hotMap.getModel().getComponent('bmap').getBMap();
                bmap.addControl(new BMap.MapTypeControl());
                bmap.addControl(new BMap.NavigationControl());
                bmap.disableScrollWheelZoom();
          });
          });
      }

二。常見問題整理

　　1.地圖顯示不出來，或者只顯示南沙群島，而且瀏覽器控制台報錯關於bmap.js加載等問題，是因為頁面bmap.js引入方式錯誤的原因

　　　　解決方案：（1）首先要在頁面首部引入百度地圖        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>    其中ak的值需要自行到百度地圖官網申請。

　　　　　　　　　（2）通過  $.get('${ctxStatic}/resources/js/bmap/bmap.min.js', function () {   ///處理邏輯  });這種方式引入bmap.min.js文件，即使使用china.js的時候也需要這種方式，否則會因為加載不全就執行產生報錯。

　　　　　　　　　（3）如果想在echarts中操作百度地圖，比如加上百度地圖的相關控件，可以通過   var bmap = hotMap.getModel().getComponent('bmap').getBMap();  這種方式獲取地圖對象，然后就可以隨心所欲的操作了，百度地圖相關操作方法可以百度地圖API。