高德地图API绘制地图，带标记点击事件，加载echarts

最新推荐文章于 2023-06-26 15:28:32 发布

where_slr

最新推荐文章于 2023-06-26 15:28:32 发布

阅读量2.1k

点赞数

分类专栏：高德地图 Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/where_slr/article/details/103682051

版权

Javascript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

高德地图

1 篇文章 0 订阅

订阅专栏

利用高德地图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);
  }
}

where_slr

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
高德地图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...
复制链接

扫一扫