高德地圖API繪製地圖，帶標記點擊事件，加載echarts

利用高德地圖web JS API 繪製地圖，地圖帶標記，切換echarts圖表

  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&申請的key&plugin=AMap.DistrictSearch">
  </script>

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      box-sizing: border-box;
      position: relative;
      width: 800px;
      height: 700px;
      border: 2px solid;
      border-image: -webkit-linear-gradient(187deg, rgba(117, 254, 239, 1), rgba(93, 35, 252, 1)) 2 2;
      border-image: -moz-linear-gradient(187deg, rgba(117, 254, 239, 1), rgba(93, 35, 252, 1)) 2 2;
      border-image: linear-gradient(187deg, rgba(117, 254, 239, 1), rgba(93, 35, 252, 1)) 2 2;
    }

    .icon_1,
    .icon_2 {
      display: inline-block;
      width: 16px;
      height: 17px;
    }

    .icon_1 {
      background: url("../img/icon_marker_1.png") no-repeat center / 100% 100%; //圖標自理
    }

    .icon_2 {
      background: url("../img/icon_marker_2.png") no-repeat center / 100% 100%; //圖標自理
    }

    .icon_1:hover,
    .icon_2:hover {
      transform: scale(2.5, 2.7);
    }

    .charts_wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      position: absolute;
      top: 20px;
      bottom: 20px;
      right: 20px;
      width: auto;
      z-index: 1;
    }

    .charts {
      box-sizing: border-box;
      position: relative;
      height: auto;
      padding: 25px;
      background: rgba(27, 20, 119, 0.92);
      border: 1px solid rgba(0, 255, 255, 1);
      opacity: 0.9;
      border-radius: 10px;
    }

    .chart_pension_situation {
      width: 280px;
      margin-bottom: 20px;
    }

    .chart_title {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      height: auto;
      padding-left: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    .point_green {
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      width: 10px;
      height: 10px;
      background: rgba(18, 233, 165, 1);
      border-radius: 50%;
    }

    .info_list_wrap {
      width: 100%;
      height: auto;
      margin-top: 20px;
      color: #f3ebeb;
      font-size: 14px;
      list-style: none;
    }

    .info_list_wrap>li:not(:last-child) {
      margin-bottom: 20px;
    }

    .info_list_wrap .item_title_wrap {
      display: flex;
      justify-content: space-between;
      align-self: center;
    }

    .item_percent {
      display: inline-block;
      width: 45px;
      text-align: right;
    }

    .item_change_percent {
      margin-right: 10px;
      margin-left: 15px;
    }

    .icon_data {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }

    .icon_data_up {
      background: url("../img/icon_data_up.png") no-repeat center / 100% 100%;
    }

    .item_progress_wrap {
      position: relative;
      width: 100%;
      height: 10px;
      margin-top: 10px;
      background: rgba(112, 112, 112, 1);
      opacity: 0.6;
      border-radius: 5px;
    }

    .item_progress {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(90deg, rgba(142, 89, 255, 1) 0%, rgba(12, 217, 241, 1) 100%);
      border-radius: 5px;
    }

    /* 養老工作 */
    .chart_pension_work {
      min-width: 390px;
      padding: 20px 5px 20px 20px;
    }

    #chart_pension_work {
      width: 100%;
      height: 160px;
      margin-top: 10px;
    }

    /* 專項資金使用效率餅圖 */
    .charts_pie {
      width: 279px;
      padding: 20px 25px;
      margin-bottom: 20px;
      background: rgba(3, 77, 174, 1);
      opacity: 0.9;
      border-radius: 10px;
    }

    .chart_pie_capital_usage_efficiency,
    .chart_pie_pension_work {
      width: 250px;
    }

    .chart_pie_pension_work {}

    .chart_pie_wrap {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 120px;
    }

    #chart_pie_capital_usage_efficiency,
    #chart_pie_pension_work {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }

    .pie_data_list {
      flex-grow: 1;
      height: auto;
    }

    .data_percent {
      width: 100%;
      height: auto;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    .pie_desc {
      width: 100%;
      height: auto;
      margin-top: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(203, 203, 203, 1);
    }

    .pie_status {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      color: #ffffff;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
    }

    .pie_status_wrap {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      height: auto;
      margin-top: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(203, 203, 203, 1);
    }

    .pie_status_surplus {
      color: #FE0202;
    }

    .pie_status_normal {
      color: #05FFC5;
    }

    .btn_check_detail {
      width: 29px;
      height: auto;
      margin-top: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: rgba(252, 214, 104, 1);
      cursor: pointer;
    }

  </style>



 <div id="container">
    <div class="charts_wrap">
      <!-- 養老情況 -->
      <div class="charts chart_pension_situation">
        <div class="chart_title"><i class="point_green"></i><label class="chart_title_text">武漢市</label>XX情況</div>
        <ul class="info_list_wrap">
          <li>
            <div class="item_title_wrap">
              <div class="item_title">xx</div>
              <div class="item_percent_wrap">
                <label class="item_percent">78%</label>
              </div>
            </div>
            <div class="item_progress_wrap">
              <div class="item_progress" style="width:78%;"></div>
            </div>
          </li>
          <li>
            <div class="item_title_wrap">
              <div class="item_title">xx</div>
              <div class="item_percent_wrap">
                <label class="item_change_percent"><i class="icon_data icon_data_up"></i>2%</label>
                <label class="item_percent">58%</label>
              </div>
            </div>
            <div class="item_progress_wrap">
              <div class="item_progress" style="width:58%;"></div>
            </div>
          </li>
          <li>
            <div class="item_title_wrap">
              <div class="item_title">xx</div>
              <div class="item_percent_wrap">
                <label class="item_change_percent"><i class="icon_data icon_data_up"></i>2%</label>
                <label class="item_percent">49%</label>
              </div>
            </div>
            <div class="item_progress_wrap">
              <div class="item_progress" style="width:49%;"></div>
            </div>
          </li>
          <li>
            <div class="item_title_wrap">
              <div class="item_title">xx</div>
              <div class="item_percent_wrap">
                <label class="item_change_percent"><i class="icon_data icon_data_up"></i>2%</label>
                <label class="item_percent">34%</label>
              </div>
            </div>
            <div class="item_progress_wrap">
              <div class="item_progress" style="width:34%;"></div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 養老工作完成進度 -->
      <div class="charts chart_pension_work">
        <div class="chart_title"><i class="point_green"></i> 專項xx工作完成進度</div>
        <div id="chart_pension_work"></div>
      </div>   
    </div>
  </div>
 <script>
	var cMap = new CMap('container');//地圖
    pensionWorkCompleteProgress('chart_pension_work'); //echarts 柱狀折線圖
  </script>

//標記點數據
let points = [{
    title: '黃陂區',
    type: 0,
    position: [114.374025, 30.874155],
    districtData: {
      name: '黃陂區',
      data: ['1']
    }
  }, {
    title: '新洲區',
    type: 0,
    position: [114.802108, 30.842149],
    districtData: {
      name: '新洲區',
      data: ['1']
    }
  }, {
    title: '蔡甸區',
    type: 0,
    position: [114.029341, 30.582186],
    districtData: {
      name: '蔡甸區',
      data: ['1']
    }
  }, {
    title: '漢南區',
    type: 0,
    position: [114.08124, 30.309637],
    districtData: {
      name: '漢南區',
      data: ['1']
    }
  },
  {
    title: '江岸區',
    type: 0,
    position: [114.30304, 30.594911],
    districtData: {
      name: '江岸區',
      data: ['1']
    }
  },
  {
    title: '江夏區',
    type: 0,
    position: [114.313961, 30.349045],
    districtData: {
      name: '江夏區',
      data: ['1']
    }
  },
  {
    title: '武昌區 ',
    type: 0,
    position: [114.307344, 30.546536],
    districtData: {
      name: '武昌區 ',
      data: ['1']
    }
  },
  {
    title: '東西湖區',
    type: 0,
    position: [1114.142483, 30.622467],
    districtData: {
      name: '東西湖區',
      data: ['1']
    }
  },
  {
    title: '礄口區',
    type: 0,
    position: [114.264568, 30.57061],
    districtData: {
      name: '礄口區',
      data: ['1']
    }
  },
  {
    title: '漢陽區',
    type: 0,
    position: [114.265807, 30.549326],
    districtData: {
      name: '漢陽區',
      data: ['1']
    }
  },
  {
    title: '洪山區',
    type: 0,
    position: [114.400718, 30.504259],
    districtData: {
      name: '洪山區',
      data: ['1']
    }
  },
  {
    title: '青山區',
    type: 0,
    position: [114.39707, 30.634215],
    districtData: {
      name: '青山區',
      data: ['1']
    }
  },
  {
    title: '黃陂區',
    type: 1,
    position: [114.374025, 30.474155],
    districtData: {
      name: '黃陂區',
      data: ['1']
    }
  }, {
    title: '新洲區',
    type: 1,
    position: [114.402108, 30.442149],
    districtData: {
      name: '新洲區',
      data: ['1']
    }
  }, {
    title: '蔡甸區',
    type: 1,
    position: [114.39341, 30.482186],
    districtData: {
      name: '蔡甸區',
      data: ['1']
    }
  }, {
    title: '漢南區',
    type: 1,
    position: [114.13124, 30.309637],
    districtData: {
      name: '漢南區',
      data: ['1']
    }
  },
  {
    title: '江岸區',
    type: 1,
    position: [114.3544304, 30.594911],
    districtData: {
      name: '江岸區',
      data: ['1']
    }
  },
  {
    title: '江夏區',
    type: 1,
    position: [114.363961, 30.349045],
    districtData: {
      name: '江夏區',
      data: ['1']
    }
  },
  {
    title: '武昌區 ',
    type: 1,
    position: [114.357344, 30.546536],
    districtData: {
      name: '武昌區 ',
      data: ['1']
    }
  },
  {
    title: '東西湖區',
    type: 1,
    position: [1114.192483, 30.622467],
    districtData: {
      name: '東西湖區',
      data: ['1']
    }
  },
  {
    title: '礄口區',
    type: 1,
    position: [114.384568, 30.57061],
    districtData: {
      name: '礄口區',
      data: ['1']
    }
  },
  {
    title: '漢陽區',
    type: 1,
    position: [114.345807, 30.519326],
    districtData: {
      name: '漢陽區',
      data: ['1']
    }
  },
  {
    title: '洪山區',
    type: 1,
    position: [114.450718, 30.504259],
    districtData: {
      name: '洪山區',
      data: ['1']
    }
  },
  {
    title: '青山區',
    type: 1,
    position: [114.42707, 30.632215],
    districtData: {
      name: '青山區',
      data: ['1']
    }
  },
  {
    title: 'B點',
    type: 1,
    position: [114.332262, 31.12589],
    districtData: {
      name: 'B區',
      data: ['2']
    }
  }
]
//地圖
function CMap(id) {
  this.id = id;
  this.map = null; //數組實例
  this.polygons = []; //行政區數組
  this.district = null; //行政區
  this.markerDataList = points;
  this.init();
}
CMap.prototype = {
  init: function () { //全局初始化
    let cMap = this;
    cMap.initCMap(cMap.id);
    cMap.initMarkerData();
    cMap.initBounds();
  },
  initCMap: function () { //初始化地圖
    let cMap = this;
    cMap.map = new AMap.Map(cMap.id, {
      mapStyle: "amap://styles/darkblue", //樣式URL
      resizeEnable: true,
      zoom: 5,
      zooms: [7, 10]
    });
  },
  initBounds: function () { //初始化行政區
    let cMap = this;
    //加載行政區劃插件
    if (!cMap.district) {
      //實例化DistrictSearch
      var opts = {
        subdistrict: 0, //獲取邊界不需要返回下級行政區
        extensions: 'all', //返回行政區邊界座標組等具體信息
        level: 'district' //查詢行政級別爲區
      };
      cMap.district = new AMap.DistrictSearch(opts);
    }
    //行政區查詢
    cMap.district.search('武漢', function (status, result) {
      cMap.map.remove(cMap.polygons) //清除上次結果
      //行政區經緯度
      var bounds = result.districtList[0].boundaries;
      if (bounds) {
        for (let i = 0, l = bounds.length; i < l; i++) {
          //生成行政區劃polygon
          let polygon = new AMap.Polygon({
            strokeWeight: 2, //邊界線寬度
            path: bounds[i],
            fillOpacity: 0.5,
            fillColor: '#08028B', //填充色
            strokeColor: '#01FEFE' //邊界線色
          });
          cMap.polygons.push(polygon);
        }
      } else {
        console.log(`行政區邊界經緯度不明！！`);
      }
      cMap.map.add(cMap.polygons);
      cMap.map.setFitView(cMap.polygons); //視口自適應
    });
  },
  initMarkerData: function () { //初始化標記點數據
    let cMap = this;
    cMap.markerDataList.forEach((item) => {
      cMap.initMarker(item);
    })
  },
  initMarker: function (pointItem = {}) { //初始化標記
    let cMap = this;
    var markerDomList = [`<div class="icon_1"></div>`,
      `<div class="icon_2"></div>`,
      `<div class="icon_3"></div>`
    ];
    // 以 icon URL 的形式創建一個途經點 114.935652,31.03589
    var viaMarker = new AMap.Marker({
      position: pointItem.position,
      // 將一張圖片的地址設置爲 icon
      // icon: 'img/icon_marker_1.png',
      // 設置了 icon 以後，設置 icon 的偏移量，以 icon 的 [center bottom] 爲原點
      offset: new AMap.Pixel(-13, -30),
      title: pointItem.title,
      content: markerDomList[pointItem.type] ? markerDomList[pointItem.type] : markerDomList[0]
    });
    // viaMarker.setClickable(false); //設置可否點擊
    viaMarker.setExtData(pointItem.districtData); //自定義屬性,可存儲Marker的ID等屬性
    viaMarker.on('click', function () {
      cMap.changeMarker(pointItem.districtData)
    })
    // 將 markers 添加到地圖
    cMap.map.add(viaMarker);
  },
  changeMarker(districtData) { //切換marker
    $('.chart_pension_situation .chart_title .chart_title_text').text(districtData.name);
  }
}

高德地圖API繪製地圖，帶標記點擊事件，加載echarts

Git上傳文件，常用的忽略策略

日常心得（持續更新）

Echarts繪製地圖帶標記tooltip

Vue——生命週期自己的理解

Koa2 + MySQL+ Sequelize搭建後臺

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結