@click 在谷歌地图信息窗口按钮中不起作用答案

【问题标题】：@click not working in google maps infowindow button@click 在谷歌地图信息窗口按钮中不起作用
【发布时间】：2018-12-02 13:24:09
【问题描述】：

在我的 Vue 应用程序中，我展示了一个带有标记的 Google 地图，这些标记是使用 Axios 从 API 检索的。当我单击一个标记时，它会显示一个带有按钮的信息窗口，其中有一个 @click='show_details = !show_details' 来切换带有详细信息的附加 div。但是，这不起作用，我不知道为什么。这是代码：

<template>
  <div class="map">
    <div class="google-map" id="map"></div>
    <div class="row justify-content-end">
      <div class="col-2">
        <div class="visit-details" v-show="show_details">details</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Map',
  data(){
    return {
      lat: 54.6,
      lng: -2,
      show_details: false
    }
  },
  methods: {
    renderMap(){
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: this.lat, lng: this.lng },
        zoom: 6,
        maxZoom: 20,
        minZoom: 3
      })

      axios.get('https://bla.json')
        .then(res => {
          res.data.forEach(doc => {
            let contentString = "<div @click='show_details = !show_details'>details</div>";
            let visitLatLng = {lat: doc.latitude, lng: doc.longitude};
            let marker = new google.maps.Marker({
              position: visitLatLng,
              title: doc.ground,
              map: map
            })
            let infowindow = new google.maps.InfoWindow({
              content: contentString
            });
            marker.addListener('click', function() {
              infowindow.open(map, marker);
            });
          })
        })
        .catch(error => console.log(error))
    }
  },
  mounted(){
    this.renderMap()
  }
}
</script>

<style>
</style>

【问题讨论】：

我不知道 vue.js，但看起来与 here 解释的问题相同。
不确定@click="" 是否正在编译，如果正在编译，请尝试@click.native=""。
不幸的是，@click.native 并没有什么不同。
它似乎没有渲染，所以也许使用github.com/xkjyeah/vue-google-maps 是一个更好的选择。

标签： google-maps vue.js

【解决方案1】：

谷歌地图信息窗口超出了 Vue.js 的范围！也许不是最干净的解决方案，但您可以使用全局函数来引用您的 Vue 函数，如下所示：

window.myGlobalFunction = this.myVueFunction;

在您的 InfoWindow 内容中

"<div><a onclick='myGlobalFunction(" + someParam + ")'>Hello</a></div>";

【讨论】：

【解决方案2】：

创建 vue Infowindow 内容组件，传递数据，使用 $on 订阅事件，$mount vue 组件并将元素注入到 infowindow。使用 $emit 触发 vue infowindow 组件事件。

InfoWindow.vue

<template>
    <div>
        ...
        <v-btn @click="selectLocation(item)">Select Location {{item.Name}}</v-btn>
        ...
    </div>
</template>

<script>
module.exports = {
    name: 'infowindow',
    props: [ 
        'item',
    ],
    methods: {
        selectLocation(item) {
          // emit click action in infowindow
          this.$emit('action:selectedLocation', item);
        },
    },
}
</script>

在打开信息窗口之前需要创建的代码部分：

...
import InfoWindowComponent from './InfoWindow.vue';
...

var InfoWindow = Vue.extend(InfoWindowComponent);
var instance = new InfoWindow({
    propsData: {
        item: item
    }
});

instance.$mount();

// parent subscribes to event from infowindow
instance.$on('action:selectedLocation', (item) => {
    // handle click action
});

var new_infowindow = new google.maps.InfoWindow({
    content: instance.$el,
});

new_infowindow.open(<map object>, <marker>);

来源：

【讨论】：