高德地图离线部署方案：获取瓦片数据与私有化调用

4. 初始化地图实例

在代码中直接 new AMap.Map。Vue 项目中无需额外导入 map 插件配置，但需自定义图层以指向本地瓦片。

完整代码示例

以下是一个完整的 MapView.vue 组件示例，展示了地图初始化、标记点、折线及文本标注的实现。

<template>
  <div class="map-wrapper">
    <div id='map-container' style="width: 100%; height: 600px;"></div>
    <div class="controls">
      <button @click="handleMarker">添加标记</button>
      <button @click="handlePolyline">绘制折线</button>
      <button @click="handleTextmark">添加文本</button>
    </div>
  </div>
</template>

<script>
// 引入高德离线 JS 库
import "../../public/amap/AMap3.js"

export default {
  data() {
    return {
      mapObj: null,
      base_url: "/",
    }
  },

  methods: {
    initMap() {
      // 自定义地图层，指向本地瓦片
      const layers = [new AMap.TileLayer({
          getTileUrl: function (x, y, z) {
              return `${this.base_url}MAP_zxy/${z}/${x}/${y}.png`;
          },
          opacity: 1,
          zIndex: 99,
      })]

      this.mapObj = new AMap.Map('map-container', {
          resizeEnable: true,
          zoom: 15,
          rotateEnable: true,
          pitchEnable: true,
          center: [113.098980, 23.361340],
          defaultCursor: 'pointer',
          showLabel: true,
          layers: layers,
      })
    },
    
    handleMarker() {
      const marker = new AMap.Marker({
        position: [113.098980, 23.361340],
      });
      this.mapObj.add(marker);
    },

    handlePolyline() {
      const lineArr = [
        [113.098980, 23.361340],
        [113.092980, 23.361340],
        [113.092980, 23.366340]
      ];
      const polyline = new AMap.Polyline({
        path: lineArr,
        strokeColor: "red",
        strokeWeight: 5,
        strokeStyle: "solid",
      });
      this.mapObj.add(polyline);
    },

    handleTextmark() {
      let text = new AMap.Text({
          text: '粤电花都燃气电厂',
          anchor: 'center',
          draggable: true,
          cursor: 'pointer',
          angle: 10,
          style: {
              'padding': '.75rem 1.25rem',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'background-color': 'white',
              'width': '10rem',
              'border-width': 0,
              'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'font-size': '20px',
              'color': 'blue'
          },
          position: [113.098980, 23.362240]
      });
      text.setMap(this.mapObj);

      let text1 = new AMap.Text({
          text: '双一橡胶',
          anchor: 'center',
          draggable: true,
          cursor: 'pointer',
          angle: 10,
          style: {
              'padding': '.75rem 1.25rem',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'background-color': 'white',
              'width': '10rem',
              'border-width': 0,
              'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'font-size': '20px',
              'color': 'blue'
          },
          position: [113.092980, 23.366340]
      });
      text1.setMap(this.mapObj);
    },
  },

  mounted() {
    this.initMap()
  }
}
</script>

<style scoped>
.map-wrapper {
  position: relative;
}
.controls {
  margin-top: 10px;
}
.controls button {
  margin-right: 10px;
  padding: 5px 10px;
}
</style>

六、常见问题排查

1. 跨域问题 (CORS)

如果地图瓦片无法加载，通常是浏览器安全策略限制了本地文件访问。解决方案包括：

• 使用 Nginx 或 Apache 搭建本地静态服务器，通过 HTTP 协议访问瓦片。
• 修改浏览器启动参数禁用安全检查（仅限开发环境）。
• 确保服务器响应头允许跨域访问。

2. 路径配置错误

getTileUrl 中的 base_url 必须与实际部署路径一致。如果使用相对路径，请确保当前页面 URL 能正确解析到瓦片目录。

3. 内存占用过高

瓦片数据量较大时，浏览器缓存可能不足。建议仅下载业务所需区域的瓦片，并合理控制最大层级（如 12-15 层）。

七、总结

通过上述步骤，开发者可以在无互联网环境下实现高德地图的完整功能。关键在于正确配置瓦片路径和 JS 库引用。此方案适用于内网监控、工业大屏、涉密系统等对数据安全有严格要求的场景。