内网走nginx代理访问高德webapi2.0

原创

已于 2024-07-10 11:20:03 修改 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

于 2023-11-16 19:35:00 首次发布

需求：客户的电脑都只能访问内，服务器可以访问外网，客户电脑使用的项目中用到了高德webapi2.0。
10.200.31.45:32100是我们的web服务器。

网上基本上都是对高德webapi1.4的配置方式，而web2.0有一些差别。

1.前端修改高德地图的js应用

如果是index.html引入，

修改之前的应用：

    <script type="text/javascript" crossorigin
        src="https://webapi.amap.com/maps?v=2.0&key=高德key&plugin=AMap.ToolBar, AMap.ControlBar,AMap.MoveAnimation,AMap.RangingTool,AMap.Geocoder"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=高德key"></script>

修改之后的配置：

    <script type="text/javascript" crossorigin
    src="<%= BASE_URL %>maps?v=2.0&key=高德key&plugin=AMap.ToolBar, AMap.ControlBar,AMap.MoveAnimation,AMap.RangingTool,AMap.Geocoder"></script>
<script src="<%= BASE_URL %>loca?v=2.0.0&key=高德key"></script>

如果是js动态加载，代码如下：

/**
 * 创建高德秘钥
 * @param secret 
 */
export function createSecret(secret?:string){
         secret=secret||'高德秘钥';
         // 拼装脚本字符串
         const script = document.createElement('script');
          // 高德 Web API 初始化配置
         script.innerHTML = `
           window._AMapSecurityConfig = {
            securityJsCode: '${secret}',
          };`;
         // 将脚本插入到页面头部
         document.head.appendChild(script);
}
//获取地图地址
const getMapUrl=()=>{
  const {map_offline}=Local.getAmapConfig();
  let mapUrl='https://webapi.amap.com';
   if(map_offline){
    mapUrl='';
   }
  if (process.env.NODE_ENV === "development"){
    mapUrl='https://webapi.amap.com';
  }
  return mapUrl;
}
/**
 * 创建高德script引入脚本
 * @param key 
 * @param url 
 */
export function loadAMapScript(url:string,key?:string) {
  key=key||'高德key';
  const mapUrl=getMapUrl();
  const src =`${mapUrl}/maps?v=2.0&key=${key}${url}`;
  console.log('我的src',src);
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onerror = reject;
    script.onload = resolve;
    document.head.appendChild(script);
  });
}
/**
 * 创建高德local script引入脚本
 * @param key 
 * @param url 
 */
 export function loadAMapLocaScript(key?:string,url?:stri