基于vue2+js+nginx实现离线高德地图

要在Vue应用中使用离线高德地图，你需要先下载高德地图的离线包，然后通过Nginx提供离线地图资源的访问。以下是实现的步骤和示例代码：

1. 下载高德地图离线包。
2. 将离线包放置到你的Vue项目的静态资源目录中，例如public或static文件夹。
3. 配置Nginx以提供静态资源的访问。
4. 在Vue应用中引入高德地图API，并初始化地图。

以下是Nginx配置的示例：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/your/vue/project/dist;
        try_files $uri $uri/ /index.html;
    }
 
    # 配置高德地图离线资源的访问
    location /offline-amap/ {
        alias /path/to/your/offline/amap/files/; # 高德地图离线包的实际路径
        expires 30d;
    }
}

在Vue组件中使用高德地图：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'OfflineMap',
  mounted() {
    // 高德地图的离线版本URL
    const amapKey = 'your-offline-amap-key';
    const mapScript = document.createElement('script');
    mapScript.type = 'text/javascript';
    mapScript.src = `https://webapi.amap.com/maps?v=1.4.15&key=${amapKey}&callback=initAMap`;
    document.head.appendChild(mapScript);
 
    // 初始化地图的回调函数
    window.initAMap = () => {
      const map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923], // 初始化地图中心点
      });
    };
  }
};
</script>

确保替换your-offline-amap-key为你的高德地图离线版本的API Key，并且将/path/to/your/offline/amap/files/替换为你的高德地图离线资源实际存放的路径。

以上步骤和代码展示了如何在Vue应用中使用离线高德地图。记得在实际部署时配置好Nginx，确保静态资源可以正确访问。