echarts + 百度地圖實現 地圖展示（代碼以vue爲例）

Vue實現echarts+百度地圖步驟如下

1，引入百度地圖api

//index.html中
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>

2，安裝echarts

npm install echarts --save

3,在需要創建地圖的組件中引入如下

import echarts from "echarts";                    
require("echarts/extension/bmap/bmap");
const CUSTOM_MAP_CONFIG = require("../../../static/custom_map_config.json");   

這個custom_map_config.json是百度地圖樣式的配製文件，在文章底部有echart推薦的配製，也可心去百度地圖獲取（百度地圖—》控制檯----》特色服務平臺----》個性化地圖）鏈接

4，option配製

      {
        title: {
          text: "應急資源統計分散圖",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          triggerOn: "click",
          show:false
        },
        bmap: {                                    //百度地圖配製
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: CUSTOM_MAP_CONFIG          //地圖樣式配製
          }
        },
        series: []
      }

5，實例化地圖即可

 let mapDiv = document.getElementById("material_map_box");
 let myChart = echarts.init(mapDiv);
 myChart.setOption(this.options);

custom_map_config.json文件

[
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#044161"
      }
    },
    {
      "featureType": "land",
      "elementType": "all",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry",
      "stylers": {
        "color": "#064f85"
      }
    },
    {
      "featureType": "railway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#005b96",
        "lightness": 1
      }
    },
    {
      "featureType": "highway",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#00508b"
      }
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "green",
      "elementType": "all",
      "stylers": {
        "color": "#056197",
        "visibility": "off"
      }
    },
    {
      "featureType": "subway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "local",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#029fd4"
      }
    },
    {
      "featureType": "building",
      "elementType": "all",
      "stylers": {
        "color": "#1a5787"
      }
    },
    {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }
  ]

此處配製儘量使用echarts官方demo使用的，百度地圖的配製不知什麼原因，我引入後，地圖無法出現，具體問題我也沒找到，知原因的請留言告之。（echarts官方demo）

6,數據在地圖上的標記

總體來說，採用scatter,在series中push如下

{
        type: "scatter",
        coordinateSystem: "bmap",            symbol:'circle',
        symbolSize: 70,
        label: {
          normal: {
            position: "inside",
            fontSize: 14,
            color: "#000000",
            lineHeight: 20,
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#fff"
          }
        },
        data: []
      }

data數組中每項數據如下：

{
   value:[經度，緯度]，
   name:'默認是label顯示的值'，
   ........
   ........   
 }

• value中的數組前兩位代表經緯度
• name中的值默認會作爲label顯示的值(當然label具體顯示什麼可以自己通過formatter定義)
• 其餘成員均可自定義，存於標點上，可供後續事件調用（如點擊事件可獲取到）

data中每一項更多參考官方文檔

參考鏈接：https://blog.csdn.net/Fimooo/article/details/102948186?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase