Vue.js Highmaps地图加载问题：如何通过import导入地图资源？

嘿，我之前在Vue项目里用Highmaps做地图组件的时候也碰到过这个问题——官方文档一堆CDN链接，想在组件化项目里用import导入确实有点懵，给你分享几个亲测有效的方法：

方法一：通过npm包导入（最推荐） #

Highmaps其实有官方的npm包，包含了核心库和所有地图资源，完全不用依赖CDN：

1. 先安装依赖：

npm install highmaps --save

2. 在Vue组件里按需导入：

// 导入Highmaps核心库
import Highcharts from 'highcharts'
// 导入地图模块并初始化
import mapModule from 'highcharts/modules/map'
mapModule(Highcharts)

// 导入具体的地图数据（这里以世界地图为例）
// 地图资源都在@highcharts/map-collection路径下，里面有各种区域的geo.json文件
import worldMap from '@highcharts/map-collection/custom/world.geo.json'

3. 初始化地图时直接使用导入的地图数据：

mounted() {
  Highcharts.mapChart('your-map-container-id', {
    chart: {
      map: worldMap
    },
    // 其他配置（数据、样式等）
    series: [{
      data: [/* 你的地图数据 */]
    }]
  })
}

你可以根据需要替换@highcharts/map-collection里的路径，比如想导入中国地图就用@highcharts/map-collection/cn/china.geo.json，里面的目录结构很清晰，找起来很方便。

方法二：下载地图文件到本地导入 #

如果不想用npm的地图包，也可以直接从CDN上把地图文件下载下来，放到项目的静态资源目录里：

1. 找到你需要的地图文件（比如world.js），右键保存到项目的src/assets/maps目录下。

2. 在组件里直接导入这个本地文件：

import Highcharts from 'highcharts'
import mapModule from 'highcharts/modules/map'
mapModule(Highcharts)

// 导入本地的地图文件
import '@/assets/maps/world.js'

3. 初始化时通过Highcharts.maps对象引用：

mounted() {
  Highcharts.mapChart('your-map-container-id', {
    chart: {
      map: Highcharts.maps['custom/world']
    },
    // 其他配置...
  })
}

这种方式适合你只需要某几个特定地图，不想安装整个地图包的场景。

小提示 #

• 不管用哪种方法，都要确保先初始化map模块，否则Highcharts会报错找不到map相关的方法。
• 如果是Vue 3项目，写法基本一致，只是组件的生命周期钩子换成onMounted即可。

内容的提问来源于stack exchange，提问作者Eugenio