Question

当Google Maps的Maps Vue.js插件（vue-google-charts）中发生事件时，我试图触发要采取的措施，但该事件似乎从未触发。如果我使用其他图表类型，则事件可正常运行，但不适用于地图。

下面是我尝试的代码示例-地图呈现得很好，但是单击地图不会触发该事件。知道我在做什么错吗？

<template>
  <div class="map">
    <h1>This is a map</h1>
  <GChart
    type="Map"
    :data="chartData"
    :options="chartOptions"
    :settings="{ packages: ['corechart', 'map'], mapsApiKey: 'REDACTED' }"
    :events="chartEvents"
  />
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts';

export default {
  name: 'map',
  components: {
    GChart
  },
  data () {
    return {

      chartData: [
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
      ],

      chartOptions: {
        chart: {
          title: 'A Map',
        }
      },

      chartEvents: {
        'click': () => {
          alert('click')
        }
      }
    }
  }
}
</script>

Answer 1

更多挖掘后发现了问题。通过Google图表使用“地图”时，只有两个可用的事件是“错误”和“就绪”。仅当直接使用Maps API时，点击，拖动，调整大小等事件才可用。

使事件与Google Charts Maps上的vue-google-charts一起使用

1 个答案: