悟生慧

 

本地静态html页面如何调用高德的接口获取西安市的企业信息？

1.申请Web服务Key

   登录高德开发平台控制台，创建应用后添加Web服务API类型Key

 

2.请求接口实现

2.1 构造请求URL，使用高德POI搜索接口：

// 接口参数配置
const params = {
  key: key,
  keywords: '企业',          // 搜索关键词
  city: '西安市',            // 限定城市
  citylimit: true,          // 严格城市限制
  page: 1,                  // 分页数
  extensions: 'all'         // 返回详细信息
};

// 生成数字签名（若开启签名功能）
const sig = generateSig(params, secret);  // 签名生成函数见下文:ml-citation{ref="3,8" data="citationList"}
const url = `https://restapi.amap.com/v3/place/text?${new URLSearchParams(params)}&sig=${sig}`;

2.2 签名生成函数

function generateSig(params, secret) {
  // 参数按ASCII排序
  const orderedParams = Object.keys(params)
    .sort()
    .map(k => `${k}=${params[k]}`)
    .join('&');
  
  // MD5加密
  return CryptoJS.MD5(orderedParams + secret).toString();
}

需引入crypto-js库：<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

3.完整HTML示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>西安企业查询</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
  </head>
  <body>
    <input type="button" id="sss" value="点击开始" onclick="OnStart();" />
    <div id="result"></div>
  </body>
  <script>
    // 高德密钥配置
    const key = "您的Web服务Key";
    const secret = "您的安全密钥";
    let allData = [];
    function OnStart() {
      fetchCompanies("西安市", "企业").then((data) =>
        console.log("获取数据:", data)
      );
    }

    // 构造带签名请求URL
    function constructRequestURL(pagenum) {
      const params = {
        key: key,
        keywords: "科技公司",
        city: "西安市",
        output: "json",
        page: pagenum,
        extensions: "all",
      };
      const sig = generateSig(params, secret);
      return `https://restapi.amap.com/v3/place/text?${$.param(
        params
      )}&sig=${sig}`;
    }

    // 数据渲染函数
    function displayResults(pois) {
      const html = pois
        .map(
          (poi) => `
            <div class="item">
              <h3>${poi.name}</h3>
              <p>地址：${poi.address || "无"}</p>
              <p>电话：${poi.tel || "未提供"}</p>
            </div>
          `
        )
        .join("");
      $("#result").html(html);
    }

    function generateSig(params, secret) {
      // 参数按ASCII排序
      const orderedParams = Object.keys(params)
        .sort()
        .map((k) => `${k}=${params[k]}`)
        .join("&");

      // MD5加密
      return CryptoJS.MD5(orderedParams + secret).toString();
    }

    async function fetchCompanies(city = "西安市", keywords = "企业") {
      let pages = 1;
      let allData = [];

      var flag = true;

      var datapush = { Code: 0, Msg: "查询成功", Data: [] };

      try {
        while (flag) {
          const url = constructRequestURL(pages);
          const response = await fetch(url);
          const data = await response.json();
          if (data.status !== "1") break;
          if (!data.pois || data.pois.length === 0) break;
          allData = ConvertResponseData(data.pois);
          datapush.Data = datapush.Data.concat(allData);
          if(allData.length > 0)
                console.log(`已获取第${pages}页数据，累计${allData.length}条`);
          pages++;
        }
      } catch (error) {
        console.log("请求失败:", error);
      }

      downloadJson(JSON.stringify(datapush,null,2));

    }

    function ConvertResponseData(data) {
      var currentData = data.map((pois) => ({
        ID: pois.id,
        NAME: pois.name,
        JC:
          Array.isArray(pois.alias) && pois.alias.length > 0
            ? pois.alias[0]
            : "",
        LX: pois.type.split(";").pop(),
        LXCODE: pois.typecode,
        JD: parseFloat(pois.location?.split(",")[0]) || 0,
        WD: parseFloat(pois.location?.split(",")[1]) || 0,
        DZ: pois.address,
        LXDH: pois.tel,
        CITYCODE: pois.adcode,
        CITYNAME: pois.adname,
        PHOTOS: pois.photos,
      }));
      return currentData;
    }

    function downloadJson(jsonStr, fileName = "data.json") {
      // 创建Blob对象并指定MIME类型:ml-citation{ref="3,5" data="citationList"}
      const blob = new Blob([jsonStr], { type: "application/json" });

      // 生成临时下载链接:ml-citation{ref="5,8" data="citationList"}
      const url = URL.createObjectURL(blob);

      // 创建并触发隐藏链接
      const link = document.createElement("a");
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();

      // 清理资源:ml-citation{ref="3,8" data="citationList"}
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }

  </script>
  <div></div>
</html>

 

 

posted on 2025-05-15 09:30  悟生慧  阅读(27)  评论(0)    收藏  举报

导航