vue中使用高德地图

vue中使用高德地图突然报错之前还可以用得好好的，什么都没有进行更改请看看什么问题

源于chatGPT仅供参考
根据您提供的错误信息，看起来是您无法连接到高德地图服务器。这可能是由于网络连接问题造成的。以下是一些常见的解决方法：

检查网络连接：确保您的计算机可以正常访问互联网，并且没有任何网络连接问题。
检查防火墙和代理设置：如果您使用防火墙或代理服务器，请检查其设置是否正确，并确保允许通过高德地图的网络流量。
清除浏览器缓存：有时浏览器缓存可能导致问题。尝试清除浏览器缓存并重新加载页面。
检查高德地图服务状态：高德地图的服务器可能会发生故障或维护。您可以访问高德地图的官方网站或开发者文档，查看是否有任何通知或故障报告。
更新或切换API密钥：在某些情况下，API密钥可能会过期或无效。请确保您正在使用有效的API密钥，并且在需要时更新它。

如果您尝试了以上方法仍然无法解决问题，请提供更多关于您的环境和代码使用情况的详细信息，以便我能够更好地帮助您排查问题。

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7410228
你也可以参考下这篇文章：在vue中使用高德地图（异步引入方式，不使用依赖）
除此之外, 这篇博客: vue中使用高德地图自定义开发中的 vue中使用高德地图自定义开发 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

用一个在地图上挖宝的小例子，来总结下自己使用高德地图的心得。

起步-加载高德地图

// 进入
cd utils

// 创建AMap.js文件
vim AMap.js

AMap.js

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://webapi.amap.com/maps?v=1.4.15&key=你们自己申请的key&plugin=AMap.Geocoder&callback=initAMap";
      script.onerror = reject;
      document.head.appendChild(script);
    }
    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

使用，在那个页面需要用高德地图，就在那个页面调用

<script>
import AMap from "@/utils/AMap";

export default {
  name: "home",
  data() {
    return {
      map: null
    };
  },
  created() {
    window.title = "地图";
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    async initAMap() {
      try {
        const res = await AMap();
        this.map = new res.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
        });
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

获取传入的宝箱位置


// 别忘记在data中添加lng和lat
created() {
    this.lng = this.$route.query.lng;
    this.lat = this.$route.query.lat;
},