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