内网中使用高德地图

前言

项目中需要在内网使用高德地图,由于很多功能需要鉴权才能使用,一般的解决方案是在内网中做代理,或者内网添加白名单访问外网。而我们项目目前只需要显示地图及在地图上添加一些标记,所以只需要将离线数据打包进APK,第一次启动时放到指定缓存目录即可。


一、获取离线数据

接入高德地图后,通过SDK里的 OfflineMapActivity 先下载需要的离线地图资源,这些资源放在 外部存储/amap 目录下,或者我们代码中通过 MapsInitializer.sdcardDir 设置的目录。

二、使用步骤

1.将资源放在assets目录下

2.app启动时将资源放到缓存目录


注意要在子线程去操作,缓存目录使用app内部目录,可不用检查读写权限。

object AssetZipUtils {

    @Throws(IOException::class)
    fun unzipFromAssets(context: Context, assetName: String, outputDirPath: String) {
        val assetManager = context.assets
        assetManager.open(assetName).use { inputStream ->
            unzip(inputStream, outputDirPath)
        }
    }

    @Throws(IOException::class)
    fun unzip(inputStream: InputStream, outputDirPath: String) {
        val buffer = ByteArray(1024)
        val outputDir = File(outputDirPath)
        if (!outputDir.exists()) {
            outputDir.mkdirs()
        }
        ZipInputStream(inputStream).use { zis ->
            var zipEntry: ZipEntry? = zis.nextEntry
            while (zipEntry != null) {
                val newFile = File(outputDir, zipEntry.name)
                if (zipEntry.isDirectory) {
                    if (!newFile.isDirectory && !newFile.mkdirs()) {
                        throw IOException("Failed to create directory ${newFile.path}")
                    }
                } else {
                    // Ensure parent directories exist
                    val parent = newFile.parentFile
                    if (!parent.isDirectory && !parent.mkdirs()) {
                        throw IOException("Failed to create directory ${parent.path}")
                    }
                    FileOutputStream(newFile).use { fos ->
                        var len: Int
                        while (zis.read(buffer).also { len = it } > 0) {
                            fos.write(buffer, 0, len)
                        }
                    }
                }
                zipEntry = zis.nextEntry
            }
            zis.closeEntry()
        }
    }
}

注意

当前使用的高德地图版本是 V10.0.700 2024-05-13,后续更新不确定能不能使用这种方法。

### React 应用中配置和使用高德地图 API 实现内网访问 #### 准备工作 为了在 React 中集成高德地图 API 并支持内网访问,需完成如下准备工作: - 注册成为高德开放平台开发者,并创建新的应用获取专属 key 值[^2]。 #### 修改安全设置 对于内网环境下加载资源的需求,应调整 `_AMapSecurityConfig` 的 `securityJsCode` 参数以适应内部网络环境。此参数用于验证请求合法性,确保即使是在隔离环境中也能正常调用服务[^1]。 ```javascript window._AMapSecurityConfig = { securityJsCode: '您的安全密钥', }; ``` #### 调整脚本引入方式 考虑到内网部署场景,建议将官方提供的外部 JavaScript 文件下载至本地服务器或指定路径下,修改其 URL 为局域网 IP 加上相应端口号的形式来指向这些静态资源文件[^4]。 例如,原本通过 CDN 获取的地图 SDK 变更为从本地读取: ```html <script type="text/javascript" src="http://localhost:8080/mapApi.min.js"></script> <!-- 或者 --> <script type="text/javascript" src="http://192.168.x.xx:port/path/to/your/local/amap-sdk-file.js"></script> ``` 注意替换上述示例中的 `localhost:8080` 和 `192.168.x.xx:port` 为你实际使用的 IP 地址与端口组合;同时确认所指目录确实存在对应名称的 js 文件[^3]。 #### 初始化 Map 对象 当页面 DOM 完全加载完毕后,再执行地图实例化的操作。这可以通过监听窗口 load 事件或者利用 React 生命周期钩子函数如 `useEffect()` 来实现。 ```jsx import React, { useEffect } from "react"; function MyMapComponent() { useEffect(() => { const initializeMap = () => { let containerDiv = document.getElementById("container"); if (!containerDiv) return; var map = new AMap.Map(containerDiv, { zoom: 12, }); }; window.addEventListener("load", initializeMap); return () => window.removeEventListener("load", initializeMap); }, []); return <div id="container" style={{ width: "100%", height: "500px" }}></div>; } export default MyMapComponent; ``` 这段代码展示了如何在一个简单的 React 组件里定义一个名为 `MyMapComponent` 的组件,它会在挂载完成后尝试初始化一张缩放级别为 12 的高德地图实例,并将其渲染到具有特定 ID (`container`) 的 div 元素中去。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值