时间戳

首页 > 解决方案 > 在 Google Charts Maps 上让事件与 vue-google-charts 一起使用

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

问题描述

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

标签： javascriptvue.jsgoogle-maps-api-3

解决方案

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

推荐阅读