新申请的高德的web端key带有秘钥，apiloader怎么支持

[sunnala]

[jaywcjlove]

@sunnala 我没有看API 文档

[jaywcjlove]

@sunnala https://lbs.amap.com/api/webservice/guide/create-project/get-key

我没有看到你发的文档呢

[Jungzl]

开发 > 地图 JS API v2.0 > 教程 > 入门 > 准备

[jaywcjlove]

@Jungzl @sunnala

1）JSAPI key搭配代理服务器并携带安全密钥转发（安全）

引入地图 JSAPI 脚本之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。（注意您这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

window._AMapSecurityConfig = {
    serviceHost:'您的代理服务器域名或地址/_AMapService',  
    // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}

const Mount = () => (
  <APILoader version="2.0.5" akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    ....
  </APILoader>
)

2）代理服务器的设置

以 Nginx 反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。如果您使用了多个key，需要在代理设置中根据 key来映射不同的安全密钥。

server {
    listen       80;             #nginx端口设置，可按实际端口修改
    server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改

    # 自定义地图服务代理
    location /_AMapService/v4/map/styles {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://webapi.amap.com/v4/map/styles;
    }
    # 海外地图服务代理
    location /_AMapService/v3/vectormap {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://fmap01.amap.com/v3/vectormap;
    }
    # Web服务API 代理
    location /_AMapService/ {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://restapi.amap.com/;
    }
}

保存相关配置之后需要通过命令 nginx -s reload 命令重新加载 nginx 配置文件

[sunnala]

@sunnala https://lbs.amap.com/api/webservice/guide/create-project/get-key

我没有看到你发的文档呢

文档引用错了，是这个：https://lbs.amap.com/api/javascript-api/guide/abc/prepare 测试了将私钥写在script标签下，也可以解决和apiLoader的兼容

    <script type="text/javascript">
            window._AMapSecurityConfig = {
                serviceHost:'您的代理服务器域名或地址/_AMapService',  
                // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
            }
    </script>

[chj-damon]

在React项目里应该怎么设置呢？

[jaywcjlove]

@chj-damon https://uiwjs.github.io/react-amap/#/api-loader

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, APILoader } from '@uiw/react-amap';

const ExampleMap = () => {
  return (
    <div style={{ border: '1px solid red' }}>
      <Map style={{ height: 100 }} />
    </div>
  )
}

const Demo = () => (
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <ExampleMap />
  </APILoader>
);

export default Demo

[chj-damon]

我的意思是那个安全密钥应该怎么设置？按它文档里的说法，如果不用nginx的话，需要手动注入一段代码在APILoader之前。

[jaywcjlove]

@chj-damon 你可以 API 请求取拿，或者环境变量传递？

[chj-damon]

应该不是这个意思，看起来还是nginx配置方便点

[starInEcust]

不管安全问题就直接怼html最上面就行了，要不就nginx。和react没关系

[mashirozx]

不管安全问题就直接怼html最上面就行了，要不就nginx。和react没关系

明天就叫人事把你开了😂

[starInEcust]

不管安全问题就直接怼html最上面就行了，要不就nginx。和react没关系

明天就叫人事把你开了😂

那你养我😭