高德地图jsapi不生效 INVALID_USER_SCODE

sunddy_x

14435人浏览 · 2022-07-28 18:34:29

sunddy_x · 2022-07-28 18:34:29 发布

一段时间未使用高德地图开发web网页，今天需要使用它的POI搜索功能，按照老规矩，登录高德开发者，打开控制台，新建应用，此时出现了新的东西—安全密钥，本文的主角。
在这里插入图片描述
此时，它并没有引起我的注意，我依旧按着步骤，在vue中引入jsapi包，注册插件，加载高德api

AMapLoader.load({
  "key": "你的key",
  "version": "2.0",
  "plugins": ['AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
  const { Map, PlaceSearch } = AMap
  const amap = new Map('amap', {
    center: [120.980795, 31.385476],
    zoom: 10,
    resizeEnable: true
  });

  const placeSearch = new PlaceSearch({
    pageSize: 10, // 单页显示结果条数
    pageIndex: 1, // 页码
    city: "010", // 兴趣点城市
    citylimit: true,  //是否强制限制在设置的城市内搜索
    map: amap, // 展现结果的地图实例
    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  });
  //关键字查询
  placeSearch.search('药房', (status, result) => {
    console.log(status);
    console.log(result);
  });
})

上述代码就是调用高德地图的POI搜索功能，示例是正常的，而到项目中就显示不出标注点，下图是官网示例：
在这里插入图片描述
遇到问题那就解决问题，首先把AMap，PlaceSearch都打印出来，发现对象是确实存在的，说明引入没有问题。然后在PlaceSearch的 search 方法回调中打印 status 和 result ，status是 error ，result是 INVALID_USER_SCODE ，翻译过来是无效的用户范围。百度这个关键词，翻了一些不相关的文章后，找到一篇有用的内容，高德地图js api出现INVALID_USER_SCODE。

还记得最开始提到的安全密钥嘛，高德地图自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用。问题就这么简单，官网地址，安全密钥的使用方法有两种，官网有介绍，这里就写一下vue3项目开发环境的写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <title></title>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
          securityJsCode:'你的密钥',
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>