JS 封装：高德地图行政区域颜色标注及提示文字功能助力区域数据可视化

前端

2024-01-09 16:12:19

利用高德地图构建的行政区划颜色标注及提示文字功能，可助您以全新视角洞察区域数据，为决策提供支持。

本篇文章将指导您利用 JS 语言封装高德地图 API，以实现行政区域颜色标注及提示文字功能，助力您进行区域数据可视化，从中获取更深入的见解，促进决策制定。

一、主要功能介绍

日期可选： 可修改日期以调整搜索条件，方便您探索不同时间段的数据。
价格阀值显示： 标注不同价格范围的区域，让您快速掌握价格分布情况，发现潜在的市场机会。
搜索区域根据数值推断填充颜色，进行填充与调整： 根据数值范围为搜索区域填充不同的颜色，并可根据需要调整填充颜色，让数据更加直观易懂。

二、技术实现

1. 准备工作

首先，需要创建一个高德地图应用，并获取密钥。
其次，需要在 HTML 页面中引用高德地图 API 脚本。
最后，需要在 JavaScript 文件中编写代码来实现行政区域颜色标注及提示文字功能。

2. 代码实现

// 创建地图对象
var map = new AMap.Map('map', {
  resizeEnable: true,
  zoom: 5,
  center: [116.397428, 39.90923]
});

// 加载行政区划数据
AMap.plugin('AMap.DistrictSearch', function() {
  var districtSearch = new AMap.DistrictSearch({
    level: 'city',
    subdistrict: 1
  });

  // 行政区划查询
  districtSearch.search('北京市', function(status, result) {
    if (status === 'complete') {
      // 获取查询结果
      var districts = result.districtList[0].districtList;

      // 遍历查询结果
      for (var i = 0; i < districts.length; i++) {
        var district = districts[i];

        // 创建行政区域对象
        var polygon = new AMap.Polygon({
          path: district.boundaries,
          fillColor: '#fff',
          fillOpacity: 0.5,
          strokeColor: '#000',
          strokeWeight: 1,
          zIndex: 1
        });

        // 为行政区域对象添加鼠标悬停事件
        polygon.on('mouseover', function(e) {
          this.setOptions({
            fillColor: '#f00',
            fillOpacity: 0.8
          });

          // 创建提示框
          var infoWindow = new AMap.InfoWindow({
            content: district.name,
            offset: new AMap.Pixel(10, -30)
          });

          // 打开提示框
          infoWindow.open(map, e.lnglat);
        });

        // 为行政区域对象添加鼠标移出事件
        polygon.on('mouseout', function() {
          this.setOptions({
            fillColor: '#fff',
            fillOpacity: 0.5
          });

          // 关闭提示框
          infoWindow.close();
        });

        // 将行政区域对象添加到地图上
        polygon.setMap(map);
      }
    }
  });
});