Echarts繪製地圖帶標記tooltip

全國各地區JSON文件網址

.agency_information {
  width: 250px;
  padding: 5px 0;
  background: transparent;
  border-radius: 5px;
}
.agency_title {
  min-width: 150px;
  height: auto;
  margin-bottom: 6px;
  font-size: 14px;
  color: #ffffff;
  font-weight: normal;
  text-align: center;
}
.agency_type {
  color: #fe0101;
}
.agency_info_row {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  padding-left: 10px;
  background: #ffffff33;
  margin-bottom: 4px;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
}
.agency_info_row > label:first-child {
  width: 60px;
  height: auto;
  margin-right: 20px;
  text-align: left;
}


<div class="map" id="map" style="width:900px;height:900px;"></div>


function ecMapServicer(name) {
  var uploadedDataURL = "json/wuhan.json";
  // 基於準備好的dom，初始化echarts實例
  const myChart = echarts.init(document.getElementById(name));

  /*  {name:'武漢', geoCoord:[114.31, 30.52]}, x-y座標軸起點[113.45, 29.95] */
  var data_type_1 = [{
      type: "一類",
      name: "五零四文化廣場",
      value: [114.31, 30.1222, 120]
    },
    {
      type: "一類",
      name: "五零四文化廣場",
      value: [114.41, 30.32, 120]
    },
    {
      type: "一類",
      name: "五零四文化廣場",
      value: [114.39, 30.52, 120]
    },
    {
      type: "一類",
      name: "五零四文化廣場",
      value: [114.73, 30.72, 120]
    }
  ];
  var data_type_2 = [{
      type: "二類",
      name: "五零四文化廣場",
      value: [114.2133, 30.1222, 120]
    },
    {
      type: "二類",
      name: "五零四文化廣場",
      value: [114.01, 30.3222, 120]
    },
    {
      type: "二類",
      name: "五零四文化廣場",
      value: [114.59, 30.82, 120]
    },
    {
      type: "二類",
      name: "五零四文化廣場",
      value: [114.73, 30.72, 120]
    }
  ];
  var data_type_3 = [{
      type: "三類",
      name: "五零四文化廣場",
      value: [114.27, 31.292, 120]
    },
    {
      type: "三類",
      name: "五零四文化廣場",
      value: [114.21, 30.72, 120]
    },
    {
      type: "三類",
      name: "五零四文化廣場",
      value: [114.429, 30.12, 120]
    },
    {
      type: "三類",
      name: "五零四文化廣場",
      value: [114.73, 30.62, 120]
    }
  ];

  // 顯示加載動畫
  myChart.showLoading();
  $.getJSON(uploadedDataURL, null, function (data) {
    echarts.registerMap("mapData", data);
    myChart.hideLoading();

    option = {
      color: ["#91c7ae", "#749f83", "#ca8622"], //顏色組
      tooltip: {
        trigger: "item",
        show: true,
        padding: 0,
        backgroundColor: "#ffffff33",
        formatter: function (params) {
          var str = `
          <div class="agency_information">
          <div class="agency_title">
            ${params.name}
            <label class="agency_type">（${params.data.type}）</label>
          </div>
          <div class="agency_info_row">
            <label>建立時間：</label><label> 2007（使用）</label>
          </div>
          <div class="agency_info_row">
            <label>負責人：</label><label> 張建華 </label>
          </div>
          <div class="agency_info_row">
            <label>牀位數： </label><label> 200 </label>
          </div>
          <div class="agency_info_row">
            <label>聯繫方式：</label><label> 125697415266</label>
          </div>
          <div class="agency_info_row">
            <label>地址：</label><label> 武漢市xxxxxxxx</label>
          </div>
        </div>
          `;
          return str;
          /* if (typeof params.value[2] == "undefined") {
            return params.name + " : " + params.value;
          } else {
            return params.name + " : " + params.value[2];
          } */
        }
      },
      grid: {
        top: 100
      },
      legend: {
        orient: "vertical",
        icon: "pain",
        right: '10%',
        bottom: '10%',
        itemWidth: 20,
        itemHeight: 12,
        align: "left",
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        data: ["一類", "二類", "三類"]
      },
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      },
      geo: {
        show: true,
        map: "mapData",
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        zoom: 1.2,
        roam: true,
        itemStyle: {
          areaColor: "#1A2B75",
          borderColor: "#3fdaff",
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            areaColor: "#2B91B7"
          }
        }
      },
      series: [
        // 一類
        {
          name: "一類",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "image://img/icon_location_1.png",//自行找圖標
          symbolSize: [14, 16],
          label: {
            normal: {
              show: false,
              backgroundColor: "#0D1151",
              position: "right",
              color: "#ffffff",
              fontSize: "14",
              padding: 20
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: "#00A0E9", //控制圖例和地圖標記點的顏色
              borderWidth: 2
            }
          },
          data: data_type_1
        },
        // 二類
        {
          name: "二類",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "image://img/icon_location_2.png",
          symbolSize: [14, 16],
          label: {
            normal: {
              show: false,
              backgroundColor: "#2B91B7",
              position: "right",
              color: "#ffffff",
              fontSize: "14",
              padding: 20
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: "#11D53F", //控制圖例和地圖標記點的顏色
              borderWidth: 2
            }
          },
          data: data_type_2
        },
        // 三類
        {
          name: "三類",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "image://img/icon_location_3.png",
          symbolSize: [14, 16],
          label: {
            normal: {
              show: false,
              backgroundColor: "#2B91B7",
              position: "right",
              color: "#ffffff",
              fontSize: "14",
              padding: 20
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: "#E39F28",
              borderWidth: 2
            }
          },
          data: data_type_3
        }
      ]
    };
    myChart.setOption(option);
  });
  myChart.setOption(option);
}