修改

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

我可以在图片中看到您有错误：

未捕获的ReferenceError，HighCharts未定义在...

这是因为，每当您为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网址找到地图数据（选择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 - 如何加载地图？

3 个答案:

修改