eachers-地图带标注

查看实例效果：地图

eachers中map的相关配置：https://echarts.apache.org/zh/option.html#series-map

html：

<div id="main" style="width: 100%;height:100vh;"></div>

js

var main = $('#main')[0];
var myChart = echarts.init(main);
myChart.showLoading();
//a地图的geoJSON 格式的数据作为地图的轮廓
show(a)；
function show(a) {
  myChart.hideLoading();
  echarts.registerMap('chain', a);
  myChart.setOption(option = {
    title: {
        text: '浪卡子县笑脸地图',
        padding:[20,10]
    },
    visualMap: {
      show:false,
      min: 0,
      max: 50,
      text: ['High', 'Low'],
      realtime: false,
      calculable: false,
      inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
      }
  },
  series: {
      type: 'map',
      mapType: 'chain', 
      itemStyle: {
        normal: {
          label: {
              show: true,  
              color:'#000'
          },
          areaColor:'#8ED1EB',
          borderWidth:1,
          borderColor:'#888',
        },
        emphasis: {
            label: {
                show: true,
            },
            areaStyle: {
                color: '#90c31d',
            },
        },
      },
      data: [
        {name:'浪卡子镇',data:'lkzz',value:'5'},
        {name:'打隆镇',data:'dlz',value:'10'},
        {name:'普玛江塘乡',data:'pmjtx',value:'11'},
        {name:'多却乡',data:'dqx',value:'22'},
        {name:'卡龙乡',data:'klx',value:'3'},
        {name:'阿扎乡',data:'azx',value:'20'},
        {name:'工布学乡',data:'gbdx',value:'35'},
        {name:'卡热乡',data:'krx',value:'35'},
        {name:'白地乡',data:'bdx',value:'9'},
        {name:'张达乡',data:'zdx',value:'9'}
      ],
//线性标注
      markLine:{
        lineStyle:{type:'solid'},
        label:{show:false},
        emphasis:{
          lineStyle:{width:1}
        },
        data: mark()
      }
    },
   
  });
};
//标记的位置coord经纬度
function mark(){
  var mark_index=[
    [{name: '浪卡子镇',data:'lkzz',coord: [90.45404999990273,28.978570195635413]},{coord: [90.45404999990273,28.278570195635413],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '打隆镇',data:'dlz',coord: [90.63188389954282,28.57774719368323]},{coord: [90.63188389954282,28.07774719368323],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '普玛江塘乡',data:'pmjtx',coord: [90.19704399949458,28.391932193417503]},{coord:[90.19704399949458,28.001932193417503],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '多却乡',data:'dqx',coord: [90.83217199962429,28.663467194667803]},{coord:[90.83217199962429,28.363467194667803],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '卡龙乡',data:'klx',coord: [90.56405299997671,29.108024196041582]},{coord:[90.56405299997671,29.408024196041582],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '阿扎乡',data:'azx',coord: [90.6996099998641,28.9889797195771813]},{coord:[90.6996099998641,29.300797195771813],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '工布学乡',data:'gbdx',coord: [91.18462589983977,28.651439194107168]},{coord: [91.18462589983977,28.421439194107168],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '卡热乡',data:'krx',coord: [90.38571499999096,29.195300197158633]},{coord: [90.38571499999096,29.495300197158633],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '白地乡',data:'bdx',coord: [90.24673499987838,29.027180196598981]},{coord: [90.24673499987838,29.347180196598981],symbol:'image://colse.png',symbolSize:[30,30]}],
    [{name: '张达乡',data:'zdx',coord: [ 91.02786999979429,28.90539419574957]},{coord: [ 91.02786999979429,29.20539419574957],symbol:'image://colse.png',symbolSize:[30,30]}],
  ]
  return mark_index;
}

生成的map轮廓：参考http://www.yayame.vip/map/map_lkzx/map_info.js中的变量a数据。

选择其他区域可使用地图选择器生成goJson（只做到省市区联动），若想生成乡镇级可参考这种获取方式：bigMap（软件）+geojson.io（详情https://blog.csdn.net/qq_36523214/article/details/106991850）