vue3 高德地图JS API 报错: CUQPS_HAS_EXCEEDED_THE_LIMIT

原因:

错误 CUQPS_HAS_EXCEEDED_THE_LIMIT 表示高德地图的 API 查询次数已超出限制(QPS 超限)。这通常发生在短时间内向服务器发送了过多的请求。QPS(Queries Per Second)是指每秒钟允许的最大请求次数。

控制台中查看并发量:

报错:

原本代码:


      if (window.AMap) {
        map.value = new window.AMap.Map(mapContainer.value, {
          zoom: 11, // 缩放级别
          center: [longitude.value, latitude.value], // 初始化 地图中心点,但会随着浏览器地理位置而改变
        });

        // 多个景点
        locationsArr.value.forEach((location, index) => {
         

          // 初始化公交导航
          const transfer = new window.AMap.Transfer({
            city: "上海",
          });

          transfer.search(
            [longitude.value, latitude.value],
            [location.longitude, location.latitude],
            function (status, result) {
              if (status === "complete") {
                const plans = result.plans; // 获取公交换乘方案
                if (plans && plans.length > 0) {
                  const plan = plans[0]; // 第一个换乘方案
                  const distance = plan.distance; // 总距离(米)
                  const duration = plan.time; // 总时间(秒)

                  // 转换时间格式
                  const totalMinutes = Math.round(duration / 60);
                  const hours = Math.floor(totalMinutes / 60);
                  const minutes = totalMinutes % 60;
                  const formattedTime =
                    hours > 0 ? `${hours}小时${minutes}分钟` : `${minutes}分钟`;

                  // 距离转化为公里
                  const distanceKm = (distance / 1000).toFixed(2) + "公里";

                  // 更新表格数据
                  juli.value[index] = location.label;
                  juliKm.value[index] = distanceKm;
                  juliTime.value[index] = formattedTime;

                
                } else {
                  console.error("没有找到公交换乘方案");
                  //   juliRefs[index].value = "没有公交换乘方案";
                  juli.value[index] = location.label;
                  juliKm.value[index] = "没有公交换乘方案";
                  juliTime.value[index] = "没有公交换乘方案";
                }
              } else {
                console.error("路线数据查询失败: " + result);
                // juliRefs[index].value = "无法计算到 " + location.label + " 的路线";
                juli.value[index] = location.label;
                juliKm.value[index] = "路线数据查询失败";
                juliTime.value[index] = "路线数据查询失败";
              }
            }
          );

          // 公里数  end

          // 点标记
          let marker = new window.AMap.Marker({
            position: [location.longitude, location.latitude], // 经纬度
          });
          map.value.add(marker);
          // 文本标记
          let text = new window.AMap.Text({
            text: location.label,
            anchor: "center", // 设置文本标记锚点

            style: {
              "margin-top": "25px",
              "border-radius": ".25rem",
              "background-color": "white",

              "border-width": 0,
              "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
              "text-align": "center",
              "font-size": "12px",
              color: "black",
            },
            position: [location.longitude, location.latitude],
          });
          map.value.add(text);

          // 预设中心点
          // 标记当前位置
          markerCenter.value = new window.AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
            position: [longitude.value, latitude.value], // 动态经纬度
          });
          map.value.add(markerCenter.value); // 添加到地图
        });
      } else {
        console.error("高德地图 JS API 未加载,请检查 SDK 脚本引入是否正确。");
      }

现在,写一个每500豪执行一次接口调用:

改成如下代码:

<script setup>
import { ref } from "vue";

// 响应式变量
const map = ref(null);
const mapContainer = ref(null);
const markerCenter = ref(null);
const juli = ref([]);
const juliKm = ref([]);
const juliTime = ref([]);
const longitude = ref(121.4737); // 默认经度(例如上海)
const latitude = ref(31.2304); // 默认纬度(例如上海)
const locationsArr = ref([
  { label: "景点1", longitude: 121.5, latitude: 31.2 },
  { label: "景点2", longitude: 121.6, latitude: 31.3 },
  { label: "景点3", longitude: 121.4, latitude: 31.25 },
]);

// 延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 查询公交换乘
async function fetchTransferData(location, index) {
  return new Promise(resolve => {
    const transfer = new window.AMap.Transfer({ city: "上海" });
    transfer.search(
      [longitude.value, latitude.value],
      [location.longitude, location.latitude],
      (status, result) => {
        if (status === "complete") {
          const plans = result.plans;
          if (plans && plans.length > 0) {
            const plan = plans[0];
            const distance = plan.distance; // 总距离(米)
            const duration = plan.time; // 总时间(秒)

            // 转换时间格式
            const totalMinutes = Math.round(duration / 60);
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;
            const formattedTime =
              hours > 0 ? `${hours}小时${minutes}分钟` : `${minutes}分钟`;

            // 距离转化为公里
            const distanceKm = (distance / 1000).toFixed(2) + "公里";

            // 更新表格数据
            juli.value[index] = location.label;
            juliKm.value[index] = distanceKm;
            juliTime.value[index] = formattedTime;
          } else {
            console.error("没有找到公交换乘方案");
            juli.value[index] = location.label;
            juliKm.value[index] = "没有公交换乘方案";
            juliTime.value[index] = "没有公交换乘方案";
          }
        } else {
          console.error("路线数据查询失败: " + result);
          juli.value[index] = location.label;
          juliKm.value[index] = "路线数据查询失败";
          juliTime.value[index] = "路线数据查询失败";
        }
        resolve(); // 查询完成
      }
    );
  });
}

// 初始化地图和处理公交查询
async function initMap() {
  if (window.AMap) {
    // 初始化地图
    map.value = new window.AMap.Map(mapContainer.value, {
      zoom: 11,
      center: [longitude.value, latitude.value],
    });

    // 循环处理每个景点,间隔 500 毫秒
    for (let index = 0; index < locationsArr.value.length; index++) {
      const location = locationsArr.value[index];

      // 查询公交换乘
      await fetchTransferData(location, index);

      // 延迟 500 毫秒
      await delay(500);
    }
  } else {
    console.error("高德地图 JS API 未加载,请检查 SDK 脚本引入是否正确。");
  }
}

// 初始化地图
initMap();
</script>

<template>
  <div ref="mapContainer" style="width: 100%; height: 500px"></div>
</template>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值