内网加载高德地图

踩蘑菇的怪蜀黍
910 阅读2分钟

前言

在过去，因为项目性质，客户电脑只能内网访问,无法直接访问外部地图服务提供商的数据，这给一些需要使用地图和位置信息的项目带来了困扰。特别是在与客户和供应商的交流中，我们无法准确、实时地展示地理位置，这对业务拓展和运营效率造成了一定的限制。 通过了解项目的Nginx可以访问外网，所以通过Nginx反向代理方式解决无法访问高德地图问题项目部署的服务器是可以访问外网的。

前端部分

拦截script脚本加载地址，重置到服务器

   
const scriptHook = () => {
   const TARGET_URL = location.origin
   const MAPS_URL = 'https://webapi.amap.com/maps'
   const WEBAPI_HTTPS_URL = 'https://webapi.amap.com'
   const REST_API_URL = 'https://restapi.amap.com'
   const property = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src')
   const NATIVE_SET = property.set
   function customiseSrcSet(url) {
       if (url.toString().search(MAPS_URL) !== -1) {
           url = TARGET_URL + url.split(MAPS_URL)[1]
       } else if (url.toString().search(WEBAPI_HTTPS_URL) !== -1) {
           url = TARGET_URL + '/webAmap' + url.split(WEBAPI_HTTPS_URL)[1]
       } else if (url.toString().search(REST_API_URL) !== -1) {
           url = TARGET_URL + '/restAmap' + url.split(REST_API_URL)[1]
       }
       NATIVE_SET.call(this, url)
   }
   Object.defineProperty(HTMLScriptElement.prototype, 'src', {
       set: customiseSrcSet
   })
}
scriptHook()

Nginx代理

  1. Nginx上添加新的模块sub_filter

  2. 添加下方反向代理高德配置到nginx.conf文件中

# 高德地图转发配置 start
location /maps {
    proxy_set_header Accept-Encoding ""; # 返回的js文件不经过GZip压缩，方便替换内容
    proxy_pass $scheme://webapi.amap.com/maps$is_args$args;
    set $args "$args&jscode=你的安全密钥";
    set $target_ip "你的IP:端口号";
    sub_filter_types *; # 文件类型 *为所有
    sub_filter_once off; # 是否只替换一次 默认on 这里改为off
    sub_filter 'https://webapi.amap.com' '${scheme}://${TARGET_IP}/webapi';
    sub_filter 'https://restapi.amap.com' '${scheme}://${TARGET_IP}/_AMapService';
    sub_filter 'https://vdata.amap.com' '${scheme}://${TARGET_IP}/vdata';

    sub_filter '/webapi.amap.com' '/${TARGET_IP}/webAmap';
    sub_filter '/restapi.amap.com' '/${TARGET_IP}/_AMapService';
    sub_filter '/vdata.amap.com' '/${TARGET_IP}/vdata';

    sub_filter 'webapi.amap.com' '${TARGET_IP}/webAmap';
    sub_filter 'restapi.amap.com' '${TARGET_IP}/_AMapService';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';
    sub_filter 'mvt.amap.com' '${TARGET_IP}/mvt';

    # sub_filter 'a.amap.com' 'dev.bonahl.com/amap';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';
    sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '${TARGET_IP}/{vdata,vdata01,vdata02,vdata03,vdata04}';
    sub_filter 'webst0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/webst0{1,2,3,4}';
    sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/wprd0{1,2,3,4}';
    sub_filter 'https://${TARGET_IP}' '${scheme}://${TARGET_IP}';
    # sub_filter 'protocol=\"https\"' 'protocol=\"http\"://';
}

location /webAmap/ {
    proxy_pass http://webapi.amap.com/$is_args$args;
    set $args "$args&jscode=3784ee8c2cefab9bad98f8a8276ee5b3";
    set $target_ip "你的IP:端口号";
    sub_filter_types *; # 文件类型 *为所有
    sub_filter_once off; # 是否只替换一次 默认on 这里改为off
    sub_filter 'https://webapi.amap.com' '${scheme}://${TARGET_IP}/webapi';
    sub_filter 'https://restapi.amap.com' '${scheme}://${TARGET_IP}/_AMapService';
    sub_filter 'https://vdata.amap.com' '${scheme}://${TARGET_IP}/vdata';

    sub_filter '/webapi.amap.com' '/${TARGET_IP}/webAmap';
    sub_filter '/restapi.amap.com' '/${TARGET_IP}/_AMapService';
    sub_filter '/vdata.amap.com' '/${TARGET_IP}/vdata';

    sub_filter 'webapi.amap.com' '${TARGET_IP}/webAmap';
    sub_filter 'restapi.amap.com' '${TARGET_IP}/_AMapService';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';

    # sub_filter 'a.amap.com' 'dev.bonahl.com/amap';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';
    sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '${TARGET_IP}/{vdata,vdata01,vdata02,vdata03,vdata04}';
    sub_filter 'webst0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/webst0{1,2,3,4}';
    sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/wprd0{1,2,3,4}';
    sub_filter 'https://${TARGET_IP}' '${scheme}://${TARGET_IP}';

  }
  location /amap/ {
    proxy_pass $scheme://a.amap.com/$is_args$args;
    set $args "$args&jscode=3784ee8c2cefab9bad98f8a8276ee5b3";
    set $target_ip "你的IP:端口号";
    sub_filter_types *; # 文件类型 *为所有
    sub_filter_once off; # 是否只替换一次 默认on 这里改为off
    sub_filter 'https://webapi.amap.com' '${scheme}://${TARGET_IP}/webapi';
    sub_filter 'https://restapi.amap.com' '${scheme}://${TARGET_IP}/_AMapService';
    sub_filter 'https://vdata.amap.com' '${scheme}://${TARGET_IP}/vdata';

    sub_filter '/webapi.amap.com' '/${TARGET_IP}/webAmap';
    sub_filter '/restapi.amap.com' '/${TARGET_IP}/_AMapService';
    sub_filter '/vdata.amap.com' '/${TARGET_IP}/vdata';

    sub_filter 'webapi.amap.com' '${TARGET_IP}/webAmap';
    sub_filter 'restapi.amap.com' '${TARGET_IP}/_AMapService';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';

    # sub_filter 'a.amap.com' 'dev.bonahl.com/amap';
    sub_filter 'vdata.amap.com' '${TARGET_IP}/vdata';
    sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '${TARGET_IP}/{vdata,vdata01,vdata02,vdata03,vdata04}';
    sub_filter 'webst0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/webst0{1,2,3,4}';
    sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '${TARGET_IP}/wprd0{1,2,3,4}';
    sub_filter 'https://${TARGET_IP}' '${scheme}://${TARGET_IP}';
}
location ~* ^/vdata01(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://vdata01.amap.com$1$is_args$args;
}

location ~* ^/vdata02(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://vdata02.amap.com$1$is_args$args;
}

location ~* ^/vdata03(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://vdata03.amap.com$1$is_args$args;
}

location ~* ^/vdata04(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://vdata04.amap.com$1$is_args$args;
}

location ~* ^/vdata(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://vdata.amap.com$1$is_args$args;
}
location /webst01/ {
    proxy_pass $scheme://webst01.is.autonavi.com/$is_args$args;
}
location /webst02/ {
    proxy_pass $scheme://webst02.is.autonavi.com/$is_args$args;
}
location /webst03/ {
    proxy_pass $scheme://webst03.is.autonavi.com/$is_args$args;
}
location /webst04/ {
    proxy_pass$scheme://webst04.is.autonavi.com/$is_args$args;
}
location /wprd01/ {
    proxy_pass $scheme://wprd01.is.autonavi.com/$is_args$args;
}
location /wprd02/ {
    proxy_pass $scheme://wprd02.is.autonavi.com/$is_args$args;
}
location /wprd03/ {
    proxy_pass $scheme://wprd03.is.autonavi.com/$is_args$args;
}
location /wprd04/ {
    proxy_pass $scheme://wprd04.is.autonavi.com/$is_args$args;
}
location /vector/ {
    proxy_pass $scheme://vector.amap.com/$is_args$args;
}
location /lbs/ {
    proxy_pass  $scheme://lbs.amap.com/$is_args$args;
}
location ~* ^/mvt(.*) {
    resolver 114.114.114.114;
    set $args "$args&jscode=你的安全密钥";
    proxy_pass $scheme://mvt.amap.com$1$is_args$args;
}

# 自定义地图服务代理
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/;
}
# 高德地图转发配置 end

  1. 保存配置文件

  2. 执行nginx -s reload命令，重启服务

avatar
文章
阅读
粉丝