【问题标题】：How to trigger a function using @click inside infowindow of google maps in vue js?如何在vue js中使用谷歌地图信息窗口内的@click触发功能？
【发布时间】：2019-04-11 15:01:49
【问题描述】：

我当前的代码是

addpolygon: function(e) {
      var vm = this;
      var point = {
        lat: parseFloat(e.latLng.lat()),
        lng: parseFloat(e.latLng.lng())
      };
      vm.coord.push(point);
      vm.replot();
      vm.marker = new google.maps.Marker({
        position: point,
        map: vm.map,
        icon: "/fred.png"
      });
      vm.infowindow = new google.maps.InfoWindow({
        content:"<a class=\"btn btn-danger\" @click.native=\"removePoint("+vm.markerid+)\">Remove</a>",
        maxWidth: 300
      });
      vm.bindInfoWindow(vm.marker, vm.map, vm.infowindow);
      vm.markers[vm.markerid] = {
        marker: vm.marker,
        point: point
      };
      vm.markerid++;
    },

当我点击Remove时，我需要触发另一个函数remove Point。

我把它定义为

removePoint: function(id) {
      alert("adsf")
    },

但我无法使用上述代码触发相同的操作。当我单击按钮删除时没有任何反应。关于相同的问题是什么。请帮我解决一下？

【问题讨论】：

看起来您在此处有语法错误：vm.markerid+)\">Remove</a>"。最后一个字符串没有开放引号。应该是vm.markerid + ")\">Remove</a>"
先生，我试过
获取错误作为未捕获的 ReferenceError: removePoint 未在 HTMLButtonElement.onclick 中定义
是否在 Vue 对象中定义了 removePoint，比如 addPolygon？它可能应该在任何 Vue 对象之外，可以从不受 Vue 管理的元素访问（地图的 infoWindow 可能没有附加到 Vue 根元素）
先生，removePoint 是一个在 addPolygon 下定义的函数

标签： javascript google-maps vue.js vuejs2 vue-component

【解决方案1】：

新解决方案

使用普通的单击处理程序从 InfoWindow 调用全局方法。

`onclick="removePoint(${vm.markerId})"`

然后使用闭包从全局方法访问您的虚拟机。

const vm = this window.removePoint = function(id) { vm.removePoint(id) }

如果您有多个实例，则需要扩展此方法。

旧解决方案

这里有两个问题。

首先，修正引用的语法错误。

vm.markerid + ")\">Remove</a>"

更好的是，利用模板字符串来避免这种疯狂的引用。

vm.infowindow = new google.maps.InfoWindow({ content:`
<a class="btn btn-danger" @click.native="removePoint(${vm.markerid})">Remove</a>`, maxWidth: 300 });

其次，vue 模板中的任何函数总是在组件的范围内。假设this. 对象放在前面。所以调用removePoint 就是调用this.removePoint。

在实例中定义函数。

vm.removePoint = function(id) { console.log(`removing point ${id}...`) }

或者确保您的组件选项在methods 部分中定义了removePoint。

如果使用诸如https://www.npmjs.com/package/window-plugin 之类的插件，您还可以全局定义removePoint（在窗口对象上）并从模板中调用$window.removePoint(" + vm.markerId + ")"。

@click.native=\"$window.removePoint(" + vm.markerid ...

function removePoint(id) { console.log(`removing point ${id}...`) }

【讨论】：

【解决方案2】：

@StevenSpungin 解决方案就像一个魅力。谢谢.. 只是为了简单。

在创建标记内容时，

markerContent += `<button onclick='editVehicle(${vehicle.id});'>EDIT</button>`;

并在创建时（任何组件）

 created() {
    let that = this;
    window.editAppointment = function(vehicleId) {
        console.log("vehicleId", vehicleId);
    }
}

【讨论】：

这对我不起作用。我还认为 window.editAppointment 应该是 window.editVehicle 每个你的 onclick
我试过<button class="btn btn-danger" onclick='editVehicle(${marker.id_ncei})'>Order Data</button> 和created() 与您的样本相同，除了window.editVehicle

【解决方案3】：

在您的挂载方法中，将 window 方法映射到 vue 方法：

mounted(){
    this.initMap();
    window.linkToKey = this.linkToKey;    // vue method wired to window method
},

在您的 infoWindow 的 html 中：

const contentString =`<img onClick="linkToKey('${video.key}')" src="images/${video.key}.png">`;
const infowindow = new google.maps.InfoWindow({
    content: contentString,
});

然后你就可以按预期定义你的 vue 方法了：

methods: {
    linkToKey(key) {
        console.log('key', key);            
        this.$router.push(`/video/${key}`);
    },

然后将 window 方法连接到您的 vue 方法，您可以通过单击 InfoWindow 中的任何项目按预期执行所有操作

【讨论】：