在 Google Charts Maps 上让事件与 vue-google-charts 一起使用答案

【问题标题】：Getting events to work with vue-google-charts on Google Charts Maps在 Google Charts Maps 上让事件与 vue-google-charts 一起使用
【发布时间】：2019-04-23 17:12:45
【问题描述】：

我正在尝试在 Google Charts (vue-google-charts) 的 Maps Vue.js 插件中发生事件时触发要采取的操作，但该事件似乎从未触发。如果我使用其他图表类型，则事件可以正常工作，但不能使用地图。

下面是我尝试过的一段代码示例 - 地图渲染良好，但点击地图不会触发事件。知道我做错了什么吗？

<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>

【问题讨论】：

标签： javascript vue.js google-maps-api-3

【解决方案1】：

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

【讨论】：