需求:客户的电脑都只能访问内,服务器可以访问外网,客户电脑使用的项目中用到了高德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引入脚