之前一直被客户提的一个需求烦恼着，他要只显示某个省份的地图，并且呢要在地图上显示小车的图标，还有其它一些点的信息。我以前只用过echarts做过图表，没做过地图，所以自己也是网上看了很多并且看了很多api文档，最后总算是搞出来了，在这里留个笔记方便自己也方便别人。
步入正题之前需要下几个文件
echats的js文件，自己可以去官网上下
地图省份的数据 （可能有的省份不对），这是我的 网盘地址： 密码：8xa9
下面步入正题：
先放上一张效果图（小车图标的位置我是随机生成了，所以有点丑不要介意哈）
效果图
我这里就以显示贵州省的地图为例，首先引入几个JS文件：
<script src="~/Scripts/jquery.js"></script>/*Jquery文件*/<script src="~/Scripts/echarts.js"></script>/*echarts文件,可从官网下载，我这里用的是3.0的*/<script src="~/Scripts/guizhou.js"></script>/*省份数据，可从我的网盘中下载*/<script src="~/Scripts/mapData/ColdCar.js"></script>/*地图上车辆显示的经纬度数据*/
车辆经纬度的数据格式大致如下
var coldCar = [{"name": "车辆1","value": [107.615944, 27.479744, 2]},{"name": "车辆2","value": [108.296644, 27.676476, 2]}]
定义一个div标签用来初始化echarts
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="echartMap" style="width: 100%;height:100%;"></div>
具体的JS实现代码
// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('echartMap'));var option = {tooltip: {show: true,trigger: 'item',triggerOn: 'click',formatter: "名称:{b}<br />坐标:{c}"},series: [{name: '冷链仓储分布',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {emphasis: {show: true,position: 'right',formatter: '{b}'}},symbolSize: 10,showEffectOn: 'render',itemStyle: {normal: {color: '#46bee9'}},data: coldStore}, {name: "冷链运输车分布",type: 'custom',//配置显示方式为用户自定义coordinateSystem: 'geo',itemStyle: {normal: {color: '#46bee9'}},renderItem: function (params, api) {//具体实现自定义图标的方法return {type: 'image',style: {image: "../../Content/images/汽车.png",x: api.coord([coldCar[params.dataIndex].value[0], coldCar[params.dataIndex].value[1]])[0],y: api.coord([coldCar[params.dataIndex].value[0], coldCar[params.dataIndex].value[1]])[1]}}},data: coldCar}, {name: "高风险食品安全分布",type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {brushType: 'stroke'},label: {emphasis: {show: true,position: 'right',formatter: '{b}'}},symbolSize: 10,showEffectOn: 'render',zlevel: 2,itemStyle: {normal: {color: '#FF4500'}},data: coldFood}, {name: "药品安全分布",type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {brushType: 'stroke'},label: {emphasis: {show: true,position: 'right',formatter: '{b}'}},symbolSize: 10,showEffectOn: 'render',zlevel: 2,itemStyle: {normal: {color: '#9932CC'}},data: coldMed}],legend: {type: "plain",show: true,orient: 'vertical',top: 'middle',left: 'left',data: [{name: "冷链仓储分布",icon: "circle",textStyle: {color: "#a9d6fa"}},{name: "冷链运输车分布",icon: "circle",textStyle: {color: "#a9d6fa"}},{name: "高风险食品安全分布",icon: "circle",textStyle: {color: "#a9d6fa"}},{name: "药品安全分布",icon: "circle",textStyle: {color: "#a9d6fa"}}]},geo: {//引入贵州省的地图map: '贵州',label: {emphasis: {show: false}},roam: true,zoom: 1,itemStyle: {normal: {borderColor: '#387ba7',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 10},emphasis: {areaColor: '#b3f3f3'}},regions: [//对不同的区块进行着色{name: '毕节市',itemStyle: {normal: {areaColor: '#2b97df'}}}, {name: '遵义市',itemStyle: {normal: {areaColor: '#a9d6fd'}}}, {name: '铜仁市',itemStyle: {normal: {areaColor: '#3497df'}}}, {name: '贵阳市',itemStyle: {normal: {areaColor: '#0d4369'}}}, {name: '安顺市',itemStyle: {normal: {areaColor: '#005c9b'}}}, {name: '黔西南布依族苗族自治州',itemStyle: {normal: {areaColor: '#a9d6fd'}}}, {name: '六盘水市',itemStyle: {normal: {areaColor: '#0d4369'}}}, {name: '黔东南苗族侗族自治州',itemStyle: {normal: {areaColor: '#005c9b'}}}, {name: '黔南布依族苗族自治州',itemStyle: {normal: {areaColor: '#2b97df'}}}]}};myChart.setOption(option);
代码呢，大致如上，显示自定义图标的代码主要是这段，具体的参数大家可以去官网看文档
{name: "冷链运输车分布",type: 'custom',//配置显示方式为用户自定义coordinateSystem: 'geo',itemStyle: {normal: {color: '#46bee9'}},renderItem: function (params, api) {//具体实现自定义图标的方法return {type: 'image',style: {image: "../../Content/images/汽车.png",x: api.coord([coldCar[params.dataIndex].value[0], coldCar[params.dataIndex].value[1]])[0],y: api.coord([coldCar[params.dataIndex].value[0], coldCar[params.dataIndex].value[1]])[1]}}},data: coldCar}
显示自定义地图的代码是这块
geo: {//引入贵州省的地图map: '贵州',label: {emphasis: {show: false}},roam: true,zoom: 1,itemStyle: {normal: {borderColor: '#387ba7',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 10},emphasis: {areaColor: '#b3f3f3'}},
好了，大致的代码就这么多啦，希望能帮到大家
最后附上完整的代码文件： 网盘地址 密码：hnn9
