Vue js Highmaps - 如何加载地图？

Question

我对 Vue.js 有点陌生，但今天我正在尝试设置某种地图来显示数据。我最终选择了 Highmaps，因为它似乎是同类产品中最好的选择，而且我已经将它 (Highcharts) 用于其他项目。
现在问题出现了，因为我正在开发一个组件驱动的 webapp，但我想从 Highmaps 导入地图。因为他们只是使用 CDN 路径，所以我真的不知道如何使用 import 语句来实现它们。下面是一些代码，可以让你更好地理解。

--- main.js ---
import Vue from 'vue'
import App from './App'
import MapComponent from './components/MapComponent.vue'
import Highcharts from 'highcharts';
import HighMaps from '../node_modules/highcharts/highmaps.js'
import VueHighcharts from 'vue-highcharts'
import loadMap from 'highcharts/modules/map';

loadMap(Highcharts);

Vue.use(VueHighcharts, { Highcharts });
Vue.use(HighMaps);

Vue.component('app-map', MapComponent)

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})
------------------------
--- MapComponent.vue ---
<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import Element from 'element-ui';
  import axios from 'axios';
  import HighCharts from 'vue-highcharts';

  export default {
    data () {
      return {
          chartOptions: {
              chart: {
                  map: 'countries/it/it-all'
              },
              ... 
          }
    },
  }
</script>

This is what you can see from the browser, the errors appear when I try to press the + / - or when I scroll inside the map's borders

正如您在脚本标签中看到的那样，我已经导入了一些库，但我也无法理解如何导入 Highmaps。

Answer 1

我在图片中看到你有一个错误：

Uncaught ReferenceError, HighCharts is not defined at ...

这是因为，无论何时为 Vue 导入库，都应该将其作为组件提供。

因此，您必须添加：

import HighCharts from 'vue-highcharts';

export default {
   //...
  components: { HighCharts },
  //...
}

Answer 2

这里的问题是CDN导入VueHighcharts，你可以全局注册为

Vue.use(VueHighcharts, { Highcharts: Highcharts })

然后到处使用它

<highmaps :options="options"></highmaps>

看看Lib Readme

底部的例子

此外，最好通过 npm 安装它，以获得更好的模块化结构来使用 webpack（或任何你使用的）

Answer 3

现在我找到了一种方法（可能很俗气）通过将对象复制粘贴到变量中然后将其引用到 chart.map

中来强制地图数据进入地图本身

我知道这可能非常糟糕，因为 Vue 需要在组件内部编译所有对象，但我希望这是一个临时解决方案。

<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import Element from 'element-ui';
  import axios from 'axios';
  import HighCharts from 'vue-highcharts';

  export default {
    data () {
    var country= {"title":"Italy","version":"1.1.2","type":"FeatureCollection","copyright":"Copyright...}
    return {
          chartOptions: {
            chart: {
              map: country
            },
    ...
    }
</script>

您可以在 this url 找到地图数据（选择 GeoJSON 选项）

编辑

我终于找到了一个很好的方法，只需将地图的原始 json 数据保存到本地 .json 文件中，然后按如下方式导入：

<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import HighCharts from 'vue-highcharts';
  import json from '../map.json'

  export default {
    data () {
      return {
          chartOptions: {
            chart: {
              map: json,
            },
            ...
      }
</script>

Vue js Highmaps - 如何加载地图？

Vue js Highmaps - How to load map?

highcharts

vue.js

highmaps

编辑